程序员个人博客网站,可以做长页的网站,建设网站计划 ppt,全国哪个餐饮品牌的网站做的好微信小程序配置上传多个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上传感谢大家的阅读 如碰到其他的问题 可以私下我 一起探讨学习 如果对你有所帮助还请 点赞 收藏谢谢~ 关注收藏博客 作者会持续更新…
