• 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) 
     },
    
  • 相关阅读:
    运输层(计算机网络谢希仁第八版)——学习笔记五
    Java项目:SSM酒店客房管理系统
    无涯教程-JavaScript - SUMIFS函数
    【工具使用】卸载VS(Visual Studio)
    基于阿奎拉探索方法的灰狼优化算法
    京东商品接口加解密算法解析
    [附源码]Java计算机毕业设计SSM二手交易平台
    选择结构练习
    模拟实现C语言--strcat函数
    算法刷题笔记 食物链(详细注释的C++实现)
  • 原文地址:https://blog.csdn.net/m0_65351601/article/details/139852453