08 多张图片上传+删除
08 多张图片上传+删除
一 多张图片上传
思路：
1 根据uni_app提供的示例copy下来组件
2 在自己的add-input.vue里面注册该组件，并渲染该组件
3 调试copy下来的组件
3-1 删除掉没有用的东西，先删除掉没有用的标签，再commond+F 鉴别出来没有用的方法。
3-2 在选择成功回掉success里面通知父组件（add-input.vue) 发送选择的结果。
4 在自己的add-input.vue里面接受上传图片组件传输过来的参数。
1 根据uni_app提供的示例copy下来组件
copy下来hollo-uniapp/pages/API/image/image.vue
copy到我们项目的/components/common路径下
2 在自己的add-input.vue里面注册该组件，并渲染该组件add-input.vue里面注册该组件
...
<!-- 多图上传 -->
<upload-image @choose="choose"></upload-image>
...
import uploadImage from '@/components/common/upload-image.vue'
export default {
components:{
uploadImage
},
...
3 调试copy下来的组件
3-1 删除掉没有用的东西，先删除掉没有用的标签，再commond+F 鉴别出来没有用的方法。
3-2 在选择成功回掉success里面通知父组件（add-input.vue) 发送选择的结果。
<template>
<view>
<view class="py-2">
<view class="uni-uploader">
<view class="uni-uploader-head">
<view class="uni-uploader-title p-1">点击可预览选好的图片</view>
<view class="uni-uploader-info">{{imageList.length}}/9</view>
</view>
<view class="uni-uploader-body">
<view class="uni-uploader__files">
<block v-for="(image,index) in imageList" :key="index">
<view class="uni-uploader__file">
<image class="uni-uploader__img rounded " mode="aspectFill" :src="image" :data-src="image" @tap="previewImage"></image>
</view>
</block>
<view class="uni-uploader__input-box rounded">
<view class="uni-uploader__input" @tap="chooseImage"></view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import permision from "@/common/permission.js"
var sourceType = [
['camera'],
['album'],
['camera', 'album']
]
var sizeType = [
['compressed'],
['original'],
['compressed', 'original']
]
export default {
data() {
return {
title: 'choose/previewImage',
imageList: [],
sourceTypeIndex: 2,
sourceType: ['拍照', '相册', '拍照或相册'],
sizeTypeIndex: 2,
sizeType: ['压缩', '原图', '压缩或原图'],
countIndex: 8,
count: [1, 2, 3, 4, 5, 6, 7, 8, 9]
}
},
onUnload() {
this.imageList = [],
this.sourceTypeIndex = 2,
this.sourceType = ['拍照', '相册', '拍照或相册'],
this.sizeTypeIndex = 2,
this.sizeType = ['压缩', '原图', '压缩或原图'],
this.countIndex = 8;
},
methods: {
chooseImage: async function() {
// #ifdef APP-PLUS
// TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
if (this.sourceTypeIndex !== 2) {
let status = await this.checkPermission();
if (status !== 1) {
return;
}
}
// #endif
if (this.imageList.length === 9) {
let isContinue = await this.isFullImg();
console.log("是否继续?", isContinue);
if (!isContinue) {
return;
}
}
uni.chooseImage({
sourceType: sourceType[this.sourceTypeIndex],
sizeType: sizeType[this.sizeTypeIndex],
count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex],
success: (res) => {
this.imageList = this.imageList.concat(res.tempFilePaths);
// 选择好后通知父组件
this.$emit('choose',this.imageList)
},
fail: (err) => {
// #ifdef APP-PLUS
if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
this.checkPermission(err.code);
}
// #endif
// #ifdef MP
uni.getSetting({
success: (res) => {
let authStatus = false;
switch (this.sourceTypeIndex) {
case 0:
authStatus = res.authSetting['scope.camera'];
break;
case 1:
authStatus = res.authSetting['scope.album'];
break;
case 2:
authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera'];
break;
default:
break;
}
if (!authStatus) {
uni.showModal({
title: '授权失败',
content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
success: (res) => {
if (res.confirm) {
uni.openSetting()
}
}
})
}
}
})
// #endif
}
})
},
isFullImg: function() {
return new Promise((res) => {
uni.showModal({
content: "已经有9张图片了,是否清空现有图片？",
success: (e) => {
if (e.confirm) {
this.imageList = [];
res(true);
} else {
res(false)
}
},
fail: () => {
res(false)
}
})
})
},
previewImage: function(e) {
var current = e.target.dataset.src
uni.previewImage({
current: current,
urls: this.imageList
})
},
async checkPermission(code) {
let type = code ? code - 1 : this.sourceTypeIndex;
let status = permision.isIOS ? await permision.requestIOS(sourceType[type][0]) :
await permision.requestAndroid(type === 0 ? 'android.permission.CAMERA' :
'android.permission.READ_EXTERNAL_STORAGE');
if (status === null || status === 1) {
status = 1;
} else {
uni.showModal({
content: "没有开启权限",
confirmText: "设置",
success: function(res) {
if (res.confirm) {
permision.gotoAppSetting();
}
}
})
}
return status;
}
}
}
</script>
<style>
.cell-pd {
padding: 22upx 30upx;
}
.list-pd {
margin-top: 50upx;
}
</style>
4 在自己的add-input.vue里面接受上传图片组件（子组件）传输过来的参数。
methods: {
...
//选中图片
choose(e){
this.imageList = e
console.log(e)
}
...
}
二 多张图片删除（注意relative）
思路：
1 定制删除图标
2 编写删除事件
4 通知父组件实时的图片的列表
1 定制删除图标
css思路
利用绝对定位,
父元素position：relative"
子元素posttion: absolute; top:0 ;right: 0 背景颜色浅灰
<view class="uni-uploader__file position-relative">
<image class="uni-uploader__img rounded " mode="aspectFill" :src="image" :data-src="image" @tap="previewImage"></image>
<view class="position-absolute top-0 right-0 rounded px-1" style="background-color: rgba(0,0,0,0.5); "
@click.stop="deleteImage(index)">
<text class="iconfont icon-shanchu text-white"></text>
</view>
</view>
2 编写删除事件
deleteImage(index){
uni.showModal({
title:'提示',//
content:'是否删除该图片？', //
showCancel:true, //
cancelText:'不删除',
confirmText:'删除',
success:res => {
if (res.confirm){
this.imageList.splice(index,1) // 删除列表中的该索引
this.$emit('change',this.imageList)
}
}
})
},
4 通知父组件实时的图片的列表
通知的函数在上个标题已经写了。
修改大标题一的父组件接受子组件方法。
<!-- 多图上传 -->
<upload-image @change="changeImage"></upload-image>
methods: {
//选中图片
changeImage(e){
this.imageList = e
console.log(e)
}
}
