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

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

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
    })
 },
相关文章
|
4月前
|
小程序 数据库 C++
【微信小程序-原生开发】实用教程17 - 详情页触发列表页刷新,点击图片放大预览,转发给好友/群,分享到朋友圈
【微信小程序-原生开发】实用教程17 - 详情页触发列表页刷新,点击图片放大预览,转发给好友/群,分享到朋友圈
44 0
|
5月前
|
小程序
小程序一键全局一秒变黑白(效果预览)
小程序一键全局一秒变黑白(效果预览)
48 0
|
6月前
|
小程序 JavaScript
在使用微信小程序开发中用vant2框架中的Uploader 文件上传wx.uploadFile无反应和使用多图上传
网上有的说是bind:after-read="afterRead"的命名问题不支持-,但是我这儿执行了console.log("file",file);证明函数运行了。后来发现是multiple="true"原因开启了多图上传,如果是多图上传的话file就是数组了
407 2
|
小程序
【uniapp】视频分享预览小程序
【uniapp】视频分享预览小程序
|
小程序 开发者
微信小程序系列——点击图片放大预览
微信小程序系列——点击图片放大预览
|
小程序 API
小程序查看(预览)文件
小程序查看(预览)文件
538 0
|
小程序
解决微信小程序echarts图表真机预览模糊
解决微信小程序echarts图表真机预览模糊
211 0
|
小程序 JavaScript
微信小程序图片放大预览效果的实现,轮播图点击放大预览
微信小程序图片放大预览效果的实现,轮播图点击放大预览
1051 0
|
1月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
245 3
|
1月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
52 0
微信小程序更新提醒uniapp
下一篇
无影云桌面