uniapp使用uviews上传多张图片

uniapp使用uviews上传多张图片,出现获取的图片路径重复了,是因为放在了onchange中了,解决方法

	<u-upload :auto-upload="true" :action="action" :header="imgheader" :file-list="fileList"
					@on-remove="delimg" max-count="9" @on-choose-complete="upimgchoose" :custom-btn="true" > 
		  <view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
		 		<u-icon name="photo" size="60"></u-icon>
		  </view>
   </u-upload> 
upimgchoose(lists, name) {
		 this.imglist = lists

		 // this.imglist = this.imglist.filter(item => item.url.startsWith('http://tmp/'))
		 //为了添加的时候二次添加图片,获取的路径和第一次添加的路径不同,过滤第二次的路径
	     this.imglist = this.imglist.filter(item => item.url.startsWith('wxfile://tmp'))
		 this.fupimg(this.imglist)
 },
fupimg(lists) {
		 console.log(lists, '选择的')
	 		let that = this
		 uni.request({
			 url: that.configURL.BaseURL + 'XXX',
			 header: {
				 'apply-secret': that.configURL.secret,
				 'Authorization': 'Bearer ' + uni.getStorageSync('dsshopApplytoken')
				 },
				 method: 'post',
					async success(response) {
						console.log(response)
						let datas = response.data.message;
						let uploadPromises = []
						if (!that.edit) {
						//添加的时候修改照片,将之前上传的清空,否则会累积
							that.form.imgs = []
						}
						for await (const item of lists) {
							await uploadPromises.push(await that.uploadImage(datas.host, item.url, datas));
						}
						console.log(that.form, 'that.formthat.form')
					},
				 fail(res) {
				  that.$api.msg(res.message);
			  return false
		 }
	 })


 },
uploadImage(apiUrl, filePath, datas) {
		 return new Promise((resolve, reject) => {
			 let that = this
			 const tempFilePath = filePath; // 获取第一张选定的图片的临时路径
			 // 利用字符串操作函数 split()、lastIndexOf() 等来提取图片的后缀
			 const lastDotIndex = tempFilePath.lastIndexOf('.'); // 查找最后一个点号的位置
			 let fileExtension;
			 if (lastDotIndex !== -1 && lastDotIndex < tempFilePath.length - 1) {
				 fileExtension = tempFilePath.substring(lastDotIndex); // 提取点号之后部分作为后缀 
			 } else {
				 	that.$api.msg('未能正确提取图片后缀!');
				 	return
			 }
			 const date = new Date().getFullYear()
			 const date1 = new Date().getMonth() + 1
			 const date2 = new Date().getDate()
			 const date3 = (new Date()).valueOf()
			 const a = datas.dir + '/' + 'weidms' + '/' + date + '/' + date1 +
						'/' + date2 + '/' + date3 + fileExtension
				 console.log(filePath, 'filePath')
				 uni.uploadFile({
					 url: apiUrl,
					 name: "file",
					 filePath: filePath,
					 formData: {
						 key: a,
						 policy: datas.policy,
						 OSSAccessKeyId: datas.accessid,
						 signature: datas.signature,
						 // 'x-oss-security-token': securityToken // 使用STS签名时必传。
				  },
			 	success: (rs) => {
					 resolve(rs);
					 if (rs.statusCode === 204) {
						 that.form.imgs.push(datas.host + a)
						 }
					 },
				 fail: (error) => {
					 reject(error);
				 },
			 });
		 });
 },
	delimg(e) {
		 console.log(e, '删除的', this.imglist) 
		 this.form.imgs.splice(e, 1) 
 },
  • 8
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值