微信小程序 van-uploader文件上传

微信小程序 van-uploader文件上传

微信小程序中使用van-uploader文件上传，具体代码如下：

（1）index.json文件中首先引入vant库的van-uploader组件：

{
  "usingComponents": {
    //"van-uploader": "/miniprogram/miniprogram_npm/@vant/weapp/uploader/index"
    "van-uploader": "@vant/weapp/uploader/index"
  },
}

注：如果下面的引入组件不成功，可以试试上面那行代码

（2）index.wxml 文件

<view class="evaluation-area">
   <view class="label">上传图片</view>
   <van-uploader file-list="{{ fileList }}" bind:after-read="afterRead" />
</view>

（3）index.js 文件

//引入common.js文件，路径按找本本项目来
import {commonUpload} from '../../../api/common'
Page({
  data:{
     fileList: [],
  },
  // 文件上传
  afterRead({detail}) {
    const { file } = detail;
    let list = this.data.fileList;
    commonUpload(file.tempFilePath).then(res => {
      console.log(res)
      list.push({
        fileUrl: res,
        url: res
      })
      this.setData({
        fileList: list, //展示
        "form.fileList": list // 接口需要的数据
      })
    })
  },
})

（4）common.js

const app = getApp()
import {getToken} from '../utils/storage'

// 图片文件上传
export function commonUpload(filePath) {
  let token = getToken();
  return new Promise((resolve, reject) => {
    wx.uploadFile({
      filePath: filePath,
      name: 'file',
      url: app.serviceUrl + '/miniapp/common/upload', // 接口路径
      header: {
        'Content-Type': 'application/json',
        'token':token,
      },
      formData: {
        'file': filePath //传递图片路径
      },
      success: (res) => {
        console.log(res)
        wx.hideLoading();
        if(res.statusCode == 200){
          var obj = JSON.parse(res.data)
          resolve(obj.url)
        }else{
          wx.showToast({
            title: '文件上传失败',
            icon:'error',
            duration:2000
          })
        }
      },
      fail: (err) => {
        wx.hideLoading();
        reject(err)
      }
    })
  })
}