• 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) 
     },
    
  • 相关阅读:
    .net core 和 WPF 开发升讯威在线客服系统:调用有道翻译接口实现实时自动翻译的方法
    Redi未授权访问的两种利用方式
    OkHttpUtils工具类,复制粘贴即可使用
    音频处理工具 sox 使用
    钉钉企业应用网关接入(保姆级教程)
    抖音小程序开发教学系列(8)- 抖音小程序的案例分析
    软件测试要学会哪些东西才能拿2w+的工资?
    Path.Combine的坑
    LeetCode买卖股票之一:基本套路(122)
    怎么做手机App测试?app测试详细流程和方法介绍(即学即用宝典)
  • 原文地址:https://blog.csdn.net/m0_65351601/article/details/139852453