建材城电商网站建设,中国工商登记网,观澜网站建设公司,新农村建设的网站微信小程序配置上传多个u-upload上传 使用的是uView框架 微信小程序配置上传多个u-upload上传图片 场景需求#xff1a;根据PC端配置项追加图片配置 小程序根据配置的图片数量#xff0c;图片名称#xff0c;进行上传图片 难度在于 我们不知道用户会追加多少个图片配置字段 …微信小程序配置上传多个u-upload上传 使用的是uView框架 微信小程序配置上传多个u-upload上传图片 场景需求根据PC端配置项追加图片配置 小程序根据配置的图片数量图片名称进行上传图片 难度在于 我们不知道用户会追加多少个图片配置字段 分析 这里我们肯定是循环多个 u-upload 那么我们需要知道上次的地方和位置 u-upload /u-upload实现 HTML view classitem :labelitem.name v-for(item,i) in attachment :keyi:requireditem.requiredu-upload :refuAttac4 actionfalse :show-tipsfalse :max-countitem.size:file-list[] on-removeremoveuAttac on-choose-completeuAttacUpload(item.name,imgsString(i),item.required) on-changeattacChange/u-upload/viewJS 首先从后端获取 配置追加图片的信息 async getApi() {this.attachment [] // 初始化数组let data await api() // 获取后端配置信息this.attachment data.datathis.attachment.forEach((item,index){this.newImgs[imgs${index}] [] // 这里我们需要记录有多少个图片配置})},属性 首先分析用户点击时先进行获取到 点击的是哪个配置字段的信息再进行赋值信息 通过 on-choose-complete 先拿到点击的数据 进行记录 async uAttacUpload(name,index,required) { 这里都是记录数据用的this.imgName indexthis.recordName namethis.imgRequired required}ttacUpload(index,list){this.newImgs[this.imgName] list // 进行赋值},通过 on-change 属性进行赋值 // 图片配置async attacChange(resa, index, lists,){const data await Oss(lists[index][url]);if (data.code 0) {this.newImgs[this.imgName][index].url data.date.url // 将url地址改成 oss地址this.newAttachment.push({// 这里我们讲添加的图片存储到新的数组里面type: image,name: this.recordName, // 做好记录url: data.date.url,}) } else {uni.showToast({title: 信息错误,icon: none})}},删除功能 removeuAttac(index){let newArr []let newUrl []this.attachment.forEach((item,index){ // 拿到所有的数据newArr [...newArr,...this.newImgs[imgs${index}]] })newUrl newArr.map((item) { // 拿到url存到新的数组里面return item.url})this.newAttachment.forEach((item,index){if(!newUrl.includes(item.url)){this.newAttachment.splice(index,1) // 找到删除掉}})},以上就是微信小程序配置上传多个u-upload上传感谢大家的阅读 如碰到其他的问题 可以私下我 一起探讨学习 如果对你有所帮助还请 点赞 收藏谢谢~ 关注收藏博客 作者会持续更新…