微信小程序：使用vant实现上传图片功能

使用vant的Uploader组件

我们使用上传的组件是vant-weapp,这样可以大大的提高我们的开发效率。使用Uploader组件首先在全局配置app.js引入该组件，也可以在页面配置json中引入

"usingComponents": {
    "van-uploader": "/path/to/vant/uploader/index",
 },

新建uploader相关page，在uploade.wxml增加我们的上传组件

<view class="uploader">
    <van-uploader file-list="{{ fileList }}" bind:after-read="afterRead" bind:delete="deleteImg" multiple="{{true}}" />
</view>

file-list绑定的是上传的文件列表，bind:after-read绑定图片读取后的事件，bind:delete绑定删除图片事件,multiple是否支持多上传功能，默认为false,我们还需要在uploade.js增加相关的逻辑

上传地址配置

配置上传的初始化值

 /**
   * 页面的初始数据
   */
  data: {
    fileList: [] //需要上传的图片列表
  },

新建项目配置文件config/index.js

export default {
  uploadUrl: `***************` //你的上传到服务器地址
}

在使用的页面中导入配置文件

import config from 'path/to/config/index' //相对路径

封装上传图片函数

为每上传一张图片返回promise任务，这里建议封装写在behaviors行为里面，因为一般在项目中我们会很多地方使用到该函数

  /**
   * @param {string} uploadFile 需要上传的文件
   * @description 上传到指定服务器
   * @return {Promise} 上传图片的promise 
   */
  uploadFile(uploadFile) {
    return new Promise((resolve, reject) => {
      wx.uploadFile({
        url: config.uploadUrl, // 上传的服务器接口地址
        filePath: uploadFile, 
        name: 'file', //上传的所需字段，后端提供
        success: (res) => {
          // 上传完成操作
          const data = JSON.parse(res.data)
          const url = data.data.url  
          resolve({
            url: url
          })
        },
        fail: (err) => {
          //上传失败：修改pedding为reject
          reject(err)
        }
      });
    })
  },
/

实现上传操作函数

编写上传图片后的操作函数，可以为每一张上传的图片作为一次promise任务，等待全部的promise执行完毕才上传成功，否则失败

/**
   * @param {object} event event.detail.file: 当前读取的文件
   * @description 上传图片后操作
   */
  afterRead(event) {
    wx.showLoading({
      title: '上传中...'
    })
    const { file } = event.detail //获取所需要上传的文件列表
    let uploadPromiseTask = [] //定义上传的promise任务栈
    for (let i = 0;i < file.length;i++) {
      uploadPromiseTask.push(this.uploadFile(file[i].path)) //push进每一张所需要的上传的图片promise栈
    }
    Promise.all(uploadPromiseTask).then(res => {
      //全部上传完毕
      this.setData({
        fileList: this.data.fileList.concat(res)
      })
      wx.hideLoading()
    }).catch(error => {
      //存在有上传失败的文件
      wx.hideLoading()
      wx.showToast({
        title: '上传失败！',
        icon: 'none',
      })
    })
  }

删除图片操作函数

绑定相对应的删除图片事件

/**
   * @param {object} event event.detail.index: 删除图片的序号值
   * @description 删除已上传的图片
   */
  deleteImg(event) {
    const delIndex = event.detail.index
    const { fileList } = this.data
    fileList.splice(delIndex, 1)
    this.setData({
      fileList
    })
  }

预览已上传的图片

preview-image设置为true即可预览图片，更多van-uploader可查阅官方文档

<van-uploader file-list="{{ fileList }}" bind:after-read="afterRead" bind:delete="deleteImg" multiple="{{true}}" preview-image="{{true}}" />

如果你觉得有帮助，给个赞关注下呗~谢谢！