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

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

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
    })
 },
相关文章
|
2月前
|
小程序 Devops 开发工具
支付宝小程序入门学习之一:如何创建支付宝小程序并在手机上预览
支付宝小程序入门学习之一:如何创建支付宝小程序并在手机上预览
|
5天前
|
小程序
小程序一键全局一秒变黑白(效果预览)
小程序一键全局一秒变黑白(效果预览)
8 0
|
2月前
|
小程序 JavaScript
在使用微信小程序开发中用vant2框架中的Uploader 文件上传wx.uploadFile无反应和使用多图上传
网上有的说是bind:after-read="afterRead"的命名问题不支持-,但是我这儿执行了console.log("file",file);证明函数运行了。后来发现是multiple="true"原因开启了多图上传,如果是多图上传的话file就是数组了
157 2
|
9月前
|
小程序
【uniapp】视频分享预览小程序
【uniapp】视频分享预览小程序
|
11月前
|
小程序 开发者
微信小程序系列——点击图片放大预览
微信小程序系列——点击图片放大预览
|
12月前
|
小程序 API
小程序查看(预览)文件
小程序查看(预览)文件
419 0
|
12月前
|
小程序
解决微信小程序echarts图表真机预览模糊
解决微信小程序echarts图表真机预览模糊
156 0
|
小程序 JavaScript
微信小程序图片放大预览效果的实现,轮播图点击放大预览
微信小程序图片放大预览效果的实现,轮播图点击放大预览
935 0
|
25天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的智慧旅游平台开发微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的智慧旅游平台开发微信小程序的详细设计和实现
39 8
|
3天前
|
存储 JSON 测试技术
【cocos 2d微信小游戏开发教程】基础使用笔记分享(三)
【cocos 2d微信小游戏开发教程】基础使用笔记分享(三)
4 0