一、前臺處理

(1)首先在wxml中為按鈕繫結上傳圖片事件

<button bindtap="upImgClick">上傳圖片</button>
<image src='{{imgUrl}}'></image>                           //顯示圖片

(2)在頁面對應的.js檔案的data中新增儲存圖片資料庫地址的變數（imgUrl）以便展示，新增上傳圖片的方法:利用微信的wx.chooseImage介面獲取圖片的臨時地址filepath，將臨時地址傳入後臺，並接收後臺傳遞的伺服器地址，賦給imgUrl

.js檔案.

upImg.js
var util = require('../../utils/util.js')
Page({
      data: {
              imgUrl:'',
      },

      //上傳圖片
      upImgClick: function (e){

        wx.chooseImage({
        count: 1,                                           //一次上傳圖片數量
        sizeType: ['compressed'],                           //圖片大小
        sourceType: ['album', 'camera'],
        success: function (res) {                           
        util.showBusy('正在上傳')
        var filePath = res.tempFilePaths[0]               //獲取圖片路徑

        // 上傳圖片
        wx.uploadFile({                                  
          url: config.service.uploadUrl,                  //伺服器介面地址
          filePath: filePath,                            
          name: 'file',

          success: function (res) {
            util.showSuccess('上傳圖片成功')
            console.log(res)
            res = JSON.parse(res.data)
            console.log(res)                             

            that.setData({
              imgUrl: res.data.imgUrl
            })
          },

          fail: function (e) {
            util.showModel('上傳圖片失敗')
          }
        })

      },
      fail: function (e) {
        console.error(e)
      }
    })
  },

)}
 

(3)util.js檔案

util.js
// 顯示繁忙提示
var showBusy = text => wx.showToast({
    title: text,
    icon: 'loading',
    duration: 10000
})

// 顯示成功提示
var showSuccess = text => wx.showToast({
    title: text,
    icon: 'success'
})

// 顯示失敗提示
var showModel = (title, content) => {
    wx.hideToast();

    wx.showModal({
        title,
        content: JSON.stringify(content),
        showCancel: false
    })
}

module.exports = { showBusy, showSuccess, showModel }
 

二、node.js後臺處理

(1)後臺獲取圖片臨時地後，用uploader獲取圖片伺服器地址，然後將伺服器地址返回前臺

uploadUrl.js
const fs = require('fs')

module.exports = async ctx => {
  // 獲取上傳之後的結果
  // 具體可以檢視：
  
  const data = await uploader(ctx.req)             
  ctx.state.data = data
  ctx.body = {
    data: data
  }
}