微信小程序后端学习笔记——图片上传

图片上传逻辑如下：

1、通过微信小程序前端将图片上传到服务器

2、服务器接收图片并保存在服务器内，并将图片保存的地址返回给前端

3、前端通过服务器保存的地址即可调用图片

一、微信小程序上传图片

微信小程序上传图片分为两步:

(1)选择图片——wx.chooseMedia

微信小程序wx.chooseMedia官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html

成功选取到图片后，在回调函数中可以获取到图片的本地存储地址，通过这个地址就可以将图片上传到服务器中

    var that = this;
    //选用chooseMedia插件对图片进行选择
    wx.chooseMedia({
          count: 1,
          mediaType: ['image'],
          sourceType: ['album', 'camera'],
          success: (res) => {
            //选择成功后显示一个加载动画
              wx.showLoading({
                  title: '加载中',
              });
              const {tempFilePath} = res.tempFiles[0]
              //定义一个实体用于存放选取到的图片的地址
              console.log(tempFilePath),
              wx.uploadFile({
                filePath: tempFilePath,
                name: 'file',
                url: 'http://localhost:3000/uploadImg',
                success(res){
                    let {path} = JSON.parse(res.data)[0];
                    path = path.replace(/\\/g,'/');
                    that.setData({
                        userIDImg:`http://localhost:3000/${path}`
                    })
                    wx.hideLoading()
                }
              })

（2）将图片上传到服务器——wx.uploadFile()

        微信小程序wx.uploadFile插件官方文档：

UploadTask | 微信开放文档

 

 var that = this;
    //选用chooseMedia插件对图片进行选择
    wx.chooseMedia({
          count: 1,
          mediaType: ['image'],
          sourceType: ['album', 'camera'],
          success: (res) => {
            //选择成功后显示一个加载动画
              wx.showLoading({
                  title: '加载中',
              });
              const {tempFilePath} = res.tempFiles[0]
              //定义一个实体用于存放选取到的图片的地址
              console.log(tempFilePath),
                //调用插件将图片上传到服务器
              wx.uploadFile({
                filePath: tempFilePath,//filePath放置图片的本地存储位置
                name: 'file',//图片的key，和api中的对应
                url: 'http://localhost:3000/uploadImg',//api的使用地址
                success(res){
                    let {path} = JSON.parse(res.data)[0];
//服务器存储成功后会返回服务器中图片的存储地址但是返回的存储地址中的‘/’被改为了\，因此还需用replace对其进行转换，转换后的地址才能被前端使用
                    path = path.replace(/\\/g,'/');
                    that.setData({
                        userIDImg:`http://localhost:3000/${path}`
                    })
                    wx.hideLoading()//获取到地址后隐藏加载动画
                }
              })

 二、图片上传API编写

通过Node.js保存前端上传的文件需要用到multer插件

npm install multer --save  //对multer插件进行安装

（1）安装好插件后，需要设置文件的存储路径与文件的命名方式

//引入multer插件
const multer = require('multer');
//通过diskStorage()设置存储位置已经命名方式
const storage = multer.diskStorage({
    //设置存储位置
    destination:(req,file,cb)=>{
        cb(null,'./file/image')//设置文件的存储地址为file文件夹下的image文件夹
    },
    filename:( req , file , cb ) => {
        let type = file.originalname.replace(/.+\./,'.');//获取图片的后缀例如.png
        cb(null,Date.now()+type)//将保存的文件名设定为上传时间+文件后缀
    }
});

const upload = multer({storage:storage});//通过刚刚设置的文件存储模板定义一个实体按照刚刚定义的模板存储图片

 （2）编写一个接口，用于调用设置好的存储函数对图片进行存储

app.post("/uploadImg",upload.array('file',10),(req,res)=>{
    res.send(req.files)//这个接口的意思是调用定义好的实体upload上传图片，一次性上传的图片次数最大为10张，上传完成后会向接口返回存放地址files
})