uni-app实现多图片批量上传，预览，删除

uni-app实现多图片批量上传，预览，删除

view

<view class="c-cell-value-img-box">
	<view class="value-img" v-for="(pItem,pIndex) in item.pics" :key="pIndex">
		<image :src="imgUrl + pItem" @click="previewImg(index,pItem)"></image>
		<mx-icon name="roundclosefill" class="img-close" @click="cancelImg(index,pIndex)"></mx-icon>
	</view>
	<view class="tip-img" @click="uploadImg(index)" v-if="item.pics.length<3">
		<mx-icon name="camera" class="camera-icon"></mx-icon>
	</view>
</view>

js

data() {
			return {
				imgUrl: this.$imgUrl,
				uploadParams: {},
				goodsList: [],
				index: 0
			}
		},

methods: {
    uploadImg(index) {
				let self = this
				self.index = index
				var count = Number(3 - self.goodsList[index].pics.length) 
				uni.chooseImage({
				    count: count,
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album', 'camera'], //从相册选择
				    success(res) {
				        const tempFilePaths = res.tempFilePaths
				        var i = 0
				        self.upload(tempFilePaths, i, self.goodsList[index].pics)
				    }
				})
			},
			upload(tempFilePaths, i, pics) {
				let self = this
				self.isLoading = true
				let key = self.uploadParams.dir + Math.random().toString(36).substr(2) + new Date().getTime()
				uni.uploadFile({
					url: self.uploadParams.hosts, //仅为示例，非真实的接口地址
					filePath: tempFilePaths[i],
					name: 'file',
					formData: {
						OSSAccessKeyId: self.uploadParams.accessid,
						bucket: self.uploadParams.bucket,
						key: key,
						policy: self.uploadParams.policy,
						signature: self.uploadParams.signature,
						success_action_status: 200
					},
					success: (res) => {
						uni.hideLoading()
						self.goodsList[self.index].pics.push(key)
						i++;
						if (i == tempFilePaths.length) { //当图片传完时，停止调用
							self.isLoading = false
						    uni.showToast({
						        title: '上传成功！',
						        icon: 'none',
						    });
						    return
						} else {
						    self.upload(tempFilePaths, i, pics)
						}
					},
					fail() {
						self.isLoading = false
					}
				});
							
			},
			cancelImg(index,pindex) {
				this.goodsList[index].pics.splice(pindex, 1);
			},
			// 预览图片
			previewImg(index,item) {
			    let self = this
				let pics = self.goodsList[index].pics.map(item=> {return item= self.$imgUrl + item})
			    uni.previewImage({
			      current: self.imgUrl + item,
			      urls: pics
			    })
			},
}