微信小程式van-uploader實現圖片上傳功能

作業摘要

目錄：

微信小程式前端技術總結

技術概述

技術詳述

技術使用中遇到的問題和解決過程

總結

列出參考文獻、參考部落格

微信小程式前端技術總結

技術概述

技術詳述

逐夢校友圈的開發我們統一使用vant-weapp元件庫,首先在頁面配置json中引入該元件

"usingComponents": {
     "van-uploader": "@vant/weapp/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任務

 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執行完畢才上傳成功，否則失敗

 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',
      })
    })
  }

刪除圖片操作函式

繫結相對應的刪除圖片事件

  deleteImg(event) {
    const delIndex = event.detail.index
    const { fileList } = this.data
    fileList.splice(delIndex, 1)
    this.setData({
      fileList
    })
  }

技術使用中遇到的問題和解決過程

剛開始寫的沒有成功，圖片顯示成功上傳到伺服器但並沒有加載出來。於是用FileSystemManager方法進行改寫。

通過 wx.getFileSystemManager() 可以獲取到全域性唯一的檔案系統管理器，所有檔案系統的管理操作通過 FileSystemManager 來呼叫。

  var FSM = wx.getFileSystemManager();
      let imageType=getApp().getImageType(e.url);
      promiseArr.push(
          new Promise(function (resolve,reject) {
            FSM.readFile({
              filePath: e.url,
              encoding: "base64",
              success: function (data) {
                wx.request({
                  url: app.globalData.baseUrl+'/api/posts/imgupload',
                  method: "POST",
                  data: {
                    base64Str: imageType + data.data,
                    filename: "111"
                  },
                  success: function (res) {
                    console.log(res);
                    console.log("上傳圖片成功");
                    if(res.data.code==200)
                    {
                      return resolve(res);
                    }
                    else{
                      return reject(res.data.message);
                    }
                  },
                  fail: function (e) {
                    console.log(e);
                    console.log("上傳圖片失敗");
                    return reject(e)
                  },

總結

雖然只是實現圖片的upload，但是圖片顯示成功上傳到伺服器但並沒有加載出來這個問題困擾了很久，找不出問題後我嘗試用其他方法進行重寫，花費了不少的時間。總的來說還是要理解網路上的程式碼模板，然後根據自己的開發專案進行修改。

列出參考文獻、參考部落格

微信小程式開發官方文件

uploader官方文件