微信小程序如何实现多图上传及预览删除

简介: 微信小程序如何实现多图上传及预览删除

1.首先在page的data里面设置

fileList: [], 
newArr:[] ,
arr:[],

2.设置wxml

 <view style="margin-top: 15px;margin-left: 10px;">
      <van-uploader file-list="{{ fileList }}" preview-full-image="true" multiple="true" preview-image="true" max-count="3" bind:after-read="afterRead" bind:delete="del" />
 </view>

3.请求图片上传接口

afterRead(event){
   console.log(event);
   var img = event.detail.file;
   let that = this;
   let arr = this.data.newArr
   that.setData({
       arr:img
    })
    console.log(img);
   img.map(function(v){
     let imgs = v.url;
     console.log(imgs);
       wx.uploadFile({ 
       filePath: imgs, 
       name: 'file', 
       url: '你的接口',
       success(res){
         let aa = JSON.parse(res.data)
         let img = aa.front_file
         console.log(img);
         arr.push({url:'接口前缀'+img});
         that.setData({
          fileList:arr 
         })
         console.log(that.data.fileList);
         console.log(that.data.newArr);
       }
     })
   })
  },

4.点击删除图片

del(event){
    let id = event.detail.index
    let newArr = this.data.newArr
    let fileList = this.data.fileList
    newArr.splice(id,1) 
    fileList.splice(id,1)
    console.log(this.data.fileList);
    this.setData({
      fileList:fileList, 
      newArr:newArr
    })
 },
相关文章
|
7月前
|
小程序 数据库 C++
【微信小程序-原生开发】实用教程17 - 详情页触发列表页刷新,点击图片放大预览,转发给好友/群,分享到朋友圈
【微信小程序-原生开发】实用教程17 - 详情页触发列表页刷新,点击图片放大预览,转发给好友/群,分享到朋友圈
64 0
|
8月前
|
小程序
小程序一键全局一秒变黑白(效果预览)
小程序一键全局一秒变黑白(效果预览)
71 0
|
9月前
|
小程序 JavaScript
在使用微信小程序开发中用vant2框架中的Uploader 文件上传wx.uploadFile无反应和使用多图上传
网上有的说是bind:after-read="afterRead"的命名问题不支持-,但是我这儿执行了console.log("file",file);证明函数运行了。后来发现是multiple="true"原因开启了多图上传,如果是多图上传的话file就是数组了
521 2
|
小程序
【uniapp】视频分享预览小程序
【uniapp】视频分享预览小程序
105 0
|
小程序 开发者
微信小程序系列——点击图片放大预览
微信小程序系列——点击图片放大预览
|
小程序 API
小程序查看(预览)文件
小程序查看(预览)文件
591 0
|
小程序
解决微信小程序echarts图表真机预览模糊
解决微信小程序echarts图表真机预览模糊
239 0
|
小程序 JavaScript
微信小程序图片放大预览效果的实现,轮播图点击放大预览
微信小程序图片放大预览效果的实现,轮播图点击放大预览
1101 0
|
4月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
966 7
|
4月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
919 1

热门文章

最新文章