小程序上传图片+Vant(可一次传多张图片)-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序上传图片+Vant(可一次传多张图片)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求：小程序端上传图片，可一次传多张照片、预览、删除。

问题：vant写的对我这种没有基础的人来说，确实有点头疼，参考了这篇参考链接，然后根据需求改了改。

实现结果：

before-read 小程序,微信小程序,小程序

代码：

wxml:

<!-- 传图片 -->
<view class="addImage" >
      <van-uploader 
      file-list="{{ fileList }}" 
      accept="image" 
      max-count="9" 
      multiple
      bind:after-read="afterRead" 
      bind:delete="deleteImg" 
      bind:before-read="beforeRead"
      deletable="{{ true }}"
      preview-size="{{(width+50)/4 }}" />
</view>

js:后端部分，请根据自己后端接口修改

//文件读取完成后
afterRead(event) {
    const { file } = event.detail;    
    var that = this
    const fileList = that.data.fileList
    //获得这次上传的图片数量，上传时避免重复上传之前传过的文件
    const thisNum = file.length 
    const beforeNum = fileList.length 
    const totalNum = thisNum + beforeNum
    //还没上传时将选择的图片的上传状态设置为加载    
    for (let j = 0; j < thisNum; j++) {
      file[j].status='uploading'
      fileList.push(file[j])
    }
    that.setData({ fileList })
    // console.log('fileList',that.data.fileList)
    // console.log('file',file)
    //上传服务器
    for (let i = beforeNum; i < totalNum; i++) {
          that.uploadImg(i,that.data.fileList[i].url )
    }
  },

js:文章来源地址https://www.toymoban.com/news/detail-516885.html

  uploadImg(fileListIndex,fileURL) {
    var that = this
    //上传文件
    const filePath = fileURL // 小程序临时文件路径
    // console.log("filePath",filePath)
    wx.uploadFile({
      url: '后端地址',
      filePath: filePath,
      name: 'file',
      header: {
        "Content-Type": "multipart/form-data",
      },
      formData: { 
        fileType:'image',
        reName:'true',
        thumbnail:'true'
      },
      success(res) {
      var tem = JSON.parse(res.data)
      // 上传完成需要更新 fileList
      that.setData({
        [`fileList[${fileListIndex}].url`]: tem.data.fileUrl,
        [`fileList[${fileListIndex}].status`]: 'done'
      })
      wx.showToast({ title: '上传成功', icon: 'none' })

      },
      fail: function (res) {
        console.log("file upload fail")
      },
    })
  },

到了这里，关于小程序上传图片+Vant(可一次传多张图片)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！