nodeJs实现微信小程序的图片上传

今天我来介绍一下nodejs如何实现保存微信小程序传过来的图片及其返回

首先wx.uploadFile绝大部分时候是配合wx.chooseImage一起出现的，毕竟选择好了图片，再统一上传是实现用户图片上传的正常逻辑。

 1 //添加图片
 2   addImg: function() {
 3     var that = this;
 4     console.log(9 - that.data.checkImgLength)
 5     if (9 - that.data.checkImgLength >= 1){
 6       wx.chooseImage({
 7         count: 9 - that.data.checkImgLength, // 默认9
 8         sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
 9         sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
10         success: function (res) {
11           var tempFilePaths = res.tempFilePaths//这里拿到的是图片在微信客户端的临时路径！！！
12           let length = tempFilePaths.length;
13           let tempList = that.data.imgLists.concat(tempFilePaths);//JSON数据
14           that.setData({
15             imgLists: tempList,
16             checkImgLength: that.data.checkImgLength + length//长度相加，这里是为了选择的图片不会超过9
17           })
18         }
19       })
20     }
21   },

这里要注意的是，第11行的路径是临时的，再刷新，这个路径就无用了，甚至这个时候复制这个路径到自己的浏览器里也没有用，这里要注意，正确的业务逻辑是传到自己的服务器，再保存到服务器，再由客户端通过服务器链接拿到图片。

下面是我的node服务器端的部分代码

 1 var express = require("express");
 2 var formidable = require("formidable");
 3 var path = require("path")
 4 var fs = require("fs")
 5 var image = require("imageinfo")
 6 const listenNumber = 5000;
 7 
 8 var app = express();
 9 
10 app.use(express.static('upload'))//这个很重要，必须要这个才能拿到图片链接，而不是进入路由，有兴趣的同学可以删掉试验一下
11 
12 app.post("/upload", (req, res) => {
13     var form = new formidable.IncomingForm();//既处理表单，又处理文件上传
14     //设置文件上传文件夹/路径，__dirname是一个常量，为当前路径
15     let uploadDir = path.join(__dirname, "../upload/");
16     form.uploadDir = uploadDir;//本地文件夹目录路径
17 
18     form.parse(req, (err, fields, files) => {
19         let oldPath = files.cover.path;//这里的路径是图片的本地路径
20         console.log(files.cover.name)//图片传过来的名字
21         let newPath = path.join(path.dirname(oldPath), files.cover.name);
22         //这里我传回一个下载此图片的Url
23         var downUrl = "http://localhost:" + listenNumber + "/upload/" + files.cover.name;//这里是想传回图片的链接
24         fs.rename(oldPath, newPath, () => {//fs.rename重命名图片名称
25             res.json({ downUrl: downUrl })
26         })
27     })
28 })
29 
30 app.listen(listenNumber)

部分重要逻辑大家可以按照自己的需求来做，这里需要引用的第三方包是express、formidable、path，大家可以在终端输入以下命令下载：

npm install express
npm install formidable
npm install path

第二十五行可以拿到图片在node服务器中的链接，大家可以通过小程序端的success回调函数拿到链接等数据，然后保存在data中，通过{{imgSrc}}进行渲染就能确定你的逻辑已经走通了。

希望我的教程能够帮到大家，加油！！！

原文出处：https://www.cnblogs.com/JobsOfferings/p/JonsOfferings_node_imgUp.html

来源：oschina

链接：https://my.oschina.net/u/4388800/blog/3267372