nodeJs實現微信小程序的圖片上傳

今天我來介紹一下nodejs如何實現保存微信小程序傳過來的圖片及其返回

首先wx.uploadFile絕大部分時候是配合wx.chooseImage一起出現的，畢竟選擇好了圖片，再統一上傳是實現用戶圖片上傳的正常邏輯。

//添加圖片
  addImg: function() {
    var that = this;
    console.log(9 - that.data.checkImgLength)
    if (9 - that.data.checkImgLength >= 1){
      wx.chooseImage({
        count: 9 - that.data.checkImgLength, // 默認9
        sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
        sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
        success: function (res) {
          var tempFilePaths = res.tempFilePaths//這里拿到的是圖片在微信客戶端的臨時路徑！！！
          let length = tempFilePaths.length;
          let tempList = that.data.imgLists.concat(tempFilePaths);//JSON數據
          that.setData({
            imgLists: tempList,
            checkImgLength: that.data.checkImgLength + length//長度相加，這里是為了選擇的圖片不會超過9
          })
        }
      })
    }
  },

這里要注意的是，第11行的路徑是臨時的，再刷新，這個路徑就無用了，甚至這個時候復制這個路徑到自己的瀏覽器里也沒有用，這里要注意，正確的業務邏輯是傳到自己的服務器，再保存到服務器，再由客戶端通過服務器鏈接拿到圖片。

下面是我的node服務器端的部分代碼

var express = require("express");
var formidable = require("formidable");
var path = require("path")
var fs = require("fs")
var image = require("imageinfo")
const listenNumber = 5000;

var app = express();

app.use(express.static('upload'))//這個很重要，必須要這個才能拿到圖片鏈接，而不是進入路由，有興趣的同學可以刪掉試驗一下

app.post("/upload", (req, res) => {
    var form = new formidable.IncomingForm();//既處理表單，又處理文件上傳
    //設置文件上傳文件夾/路徑，__dirname是一個常量，為當前路徑
    let uploadDir = path.join(__dirname, "../upload/");
    form.uploadDir = uploadDir;//本地文件夾目錄路徑

    form.parse(req, (err, fields, files) => {
        let oldPath = files.cover.path;//這里的路徑是圖片的本地路徑
        console.log(files.cover.name)//圖片傳過來的名字
        let newPath = path.join(path.dirname(oldPath), files.cover.name);
        //這里我傳回一個下載此圖片的Url
        var downUrl = "http://localhost:" + listenNumber + "/upload/" + files.cover.name;//這里是想傳回圖片的鏈接
        fs.rename(oldPath, newPath, () => {//fs.rename重命名圖片名稱
            res.json({ downUrl: downUrl })
        })
    })
})

app.listen(listenNumber)

部分重要邏輯大家可以按照自己的需求來做，這里需要引用的第三方包是express、formidable、path，大家可以在終端輸入以下命令下載：

npm install express
npm install formidable
npm install path

第二十五行可以拿到圖片在node服務器中的鏈接，大家可以通過小程序端的success回調函數拿到鏈接等數據，然后保存在data中，通過{{imgSrc}}進行渲染就能確定你的邏輯已經走通了。

希望我的教程能夠幫到大家，加油！！！

 

# 博主說：哈嘍大家，實在不好意思，這個文章實在是有一些久了，關於formidable或者其他庫的使用之類的規則和詳情都是變了的，小伙伴們可以看一下后面我一篇關於React富文本的文章，里面也有關於文件上傳的node代碼，鏈接在這兒： React+wangeditor+node富文本處理帶圖片上傳