1、引入vant weapp上傳圖片組件

將vant組件放置在小程序文件中，在小程序app.json文件usingComponents中引入上傳圖片組件地址，將下面代碼放入usingComponents中，要注意文件地址是否正確。

"van-uploader": "@vant/weapp/uploader/index"

2、wxml頁(yè)面展示上傳組件

fileList 展示圖片的url地址，格式為fileList: [ { url: 'https://img.yzcdn.cn/vant/leaf.jpg', name: '圖片1' }]

afterRead是點(diǎn)擊上傳選擇圖片后讀取的文件信息函數(shù)。

3、bind:after-read上傳圖片后執(zhí)行函數(shù)

// 上傳圖片

uploadToCloud(file) {

    const { file } = this.file;

    console.log(file);//返回的圖片臨時(shí)地址

}

4、使用微信小程序api上傳圖片至服務(wù)器

wx.uploadFile({ 

    url: 'https://example.weixin.qq.com/upload', //僅為示例，非真實(shí)的接口地址 

    filePath: file, 

    name: 'file',

    success (res){ 

    const data = res.data //do something 

    } 

})

將第三步中返回的圖片臨時(shí)地址通過(guò)wx.uploadFile api上傳到服務(wù)器，filePath填入返回的圖片地址，上傳成功后通過(guò)success中的res返回，返回成功后對(duì)fileList賦值即可，并將返回成功圖片地址儲(chǔ)存到表單中，用于下一步的提交使用。

wx.uploadFile api詳細(xì)使用方法可參考微信小程序api：https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html