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

短命女 2022-12-09 01:59 714阅读 0赞

view

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
    			    })
    			},
    }