微信小程序上传图片到Node服务附代码

很多表单提交页面或者运营系统页面通常会用到上传图片的功能。

本文主要讲述在微信小程序场景下如何构建上传图片到Node服务，并附上例子。 

01 页面 Demo

找微群小工具 发布微群的页面

02 前端代码 

wx.chooseImage({

    count: 1,

    sizeType: ['original', 'compressed'],

    sourceType: ['album', 'camera'],

    success: (res) => {

            const tempFilePaths = res.tempFilePaths[0]

            this.setData({

                coverImg: tempFilePaths

            });

            this.coverImg = tempFilePaths;

            wx.uploadFile({

                url: `${serverHost}uploadImg`, //服务器接口地址

                filePath: tempFilePaths,

                name: 'file',

                success: function (res) {

                    console.log(res); },

                    fail: function (e) {

                        console.log(e.stack);

                    }

                })

            }

})

1. wx.chooseImage 返回的图片可以直接作为 Image 的 src 传入，实现图片预览功能。 

2. wx.uploadFile 上传到后台的域名需要在微信小程序开发接口配置上传文件的允许域名。

小程序开发配置

03 Node服务代码 

const multer = require('multer');

const upload = multer({ dest: './tmp/' })

app.use('/uploadImg', upload.single('file'), (req, res) => {

    res.json({

        ret: 0,

        msg: ''

    })

});

1. 后台代码就很简单了，引入 multer ，upload.single(’file‘) 是生成一个 express 中间件。 

2. 上传的文件会放到服务器 tmp 目录下。 

04 总结 

    本文只是介绍如何将客户端的图片传给服务端，还有很多没有实现的地方，例如限制上传图片的大小，以免在传很大文件的时候服务扛不住。例如把图片存放在腾讯云的“Busket 桶”，放在服务器上有带宽的限制，多几个用户同时访问就会很慢。 

下篇文章会介绍如何把服务端的图片上传到腾旭云的图床上。