微信小程序开发：使用vant的Uploader组件实现图片上传功能

使用vant的Uploader组件

我们使用的上传组件是vant weapp，它可以大大提高我们的开发效率。如果您想使用Uploader组件，请先在全局配置app.js中启用它。您还可以将

"usingComponents": {
    "van-uploader": "/path/to/vant/uploader/index",
 },
复制代码

添加到页面设置json文件中，以创建与上传者相关的新页面，并将我们的上传添加到uploade.wxml文件中。组件

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

filelist 绑定到下载的文件。文件列表，bind:after-read读取事件图像后绑定，bind:deletebinds删除图像事件， multiple❙support❙功能，默认值为 false，我们还需要在文件中添加相关逻辑 upload.js

发送地址的定义

定义发送的初始化值

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

新建一个项目定义文件。 index.js

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

导入你正在使用的页面的设置文件

import config from 'path/to/config/index' //相对路径
复制代码

封装上传图片功能

对每个上传的图片返回promiseTask并写在这里行为行为，因为通常在项目中我们很多地方都会用到这个函数

  /**
   * @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任务，需要等待所有promises完成才上传成功，否则失败

/**
   * @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可以查看官方文档作者：https://juejin.im/post/5e843c3d5188257397285db1
来源：掘金
版权归作者所有。商业转载请联系作者获得许可。非商业转载请注明出处。