欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 新闻 > 社会 > uniapp使用uviews上传多张图片

uniapp使用uviews上传多张图片

2025/4/3 10:52:16 来源:https://blog.csdn.net/m0_65351601/article/details/139852453  浏览:    关键词: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 = thisuni.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 = thisconst 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() + 1const date2 = new Date().getDate()const date3 = (new Date()).valueOf()const a = datas.dir + '/' + 'weidms' + '/' + date + '/' + date1 +'/' + date2 + '/' + date3 + fileExtensionconsole.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) },

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词