node+express+微信小程序+七牛云实现上传图片

赵铭or 2023-11-20 原文

本篇宗旨是实打实尽量教会读者去做，所有不讲太多原理，只讲怎么做，同时也是个人学习记录

在上传图片中我们需要知道有几种方式

1、node把前端上传的图片转成base64格式，直接存入数据库(不推荐)

2、前端上传本地图片、服务器接受后存入文件夹、返回该图片路径给前端同时保存在数据库中

3、前端上传图片至第三方平台(阿里云/腾讯云的OSS、七牛云上)

本文主讲2、3的方式

一、前端上传图片至服务器，接口返回服务器的路径

阅读时希望读者能懂基本的express

1、前端相关代码

wxml

<view>
  <button bindtap="onUphand">上传图片</button>
</view>

wxjs

onUphand() {
    wx.chooseMedia({
      count: 1,  //文件数量
      mediaType: ['image', 'video'],
      sourceType: ['album', 'camera'],
      maxDuration: 30,
      camera: 'back',
      success(res) {
        console.log('输出res', res);
        console.log(res.tempFiles[0].tempFilePath)
        console.log(res.tempFiles[0].size)

        let file = res.tempFiles[0].tempFilePath //这里是拿到该文件在本地中的路径
        wx.uploadFile({ 
          filePath: file,
          name: 'file',  //这里很重要，需要与node相关代码一致不然会报错
          url: 'http://44.139.243.230:8088/api/uploadImage',   //这是请求的后端接口名（这里是我自己的）
          success: function (res) {
            console.log('res', res);
          }
        })
      }
    })
  },

2、node相关代码

一、先安装相关依赖

npm i multer
npm i md5
npm i path

二、创建相关文件

随便你放入那个目录下，引入正确即可

multerConfig.js

//上传单个图片的方法
// 1. 引入依赖
const multer = require('multer');
const md5 = require('md5');

// 2. 引入工具
const path = require('path') //
const resolve = (dir) => {
    return path.join(__dirname, './', dir)
}

// 3. multer的配置对象
let storage = multer.diskStorage({
    // 3.1 存储路径
    destination: function (req, file, cb) {
        // 3.1.1 允许图片上传
        if (file.mimetype === 'image/jpeg' || file.mimetype === 'image/png') {
            cb(null, resolve('../public/images')) //这是很重要的一步！ 改路径你要替换成自己服务器中存放图片的路径
        } else {
            // 3.1.2 限制其他文件上传类型
            cb({ error: 'Mime type not supported' })
        }

    },
    //  3.2 存储名称
    filename: function (req, file, cb) {
        let fileFormat = (file.originalname).split(".");
        cb(null, md5(+new Date()) + "." + fileFormat[fileFormat.length - 1]);
    },
});

// 4. 添加配置
const multerConfig = multer({
    storage: storage,
});

// 5. 导出配置好的multerConfig
module.exports = multerConfig;

upload.js

//上传图片的方法
// 1. 引入配置好的multerConfig
const multerConfig = require('./multerConfig');

// 2. 定义静态变量
const fileName = "file"  // 上传的 fileName 名称    这里就是前面提到过，前端调用wx.uploadFile时注意的地方
const updateBaseUrl = "http://127.0.0.1:8088" // 上传到服务器地址  
const imgPath = "/img/images/" // 上传到服务器的虚拟目录

// 上传接口的 请求参数req  响应参数res
function upload(req, res) {
    return new Promise((resolve, reject) => {
        multerConfig.single(fileName)(req, res, function (err) {
            if (err) {
                reject(err)
            } else {
                // `req.file.filename`  请求文件名称后缀 
                // `updateBaseUrl + imgPath + req.file.filename` 完整的服务器虚拟目录
                resolve(updateBaseUrl + imgPath + req.file.filename)
            }
        });
    })
}

module.exports = upload;

三、路由文件中引入

const upload = require('../utils/upload.js')

//上传图片的方法
router.post("/uploadImage", (req, res) => {
  upload(req, res).then(imgsrc => {
    res.send({
      "code": "ok",
      "message": "上传成功",
      'data': {
        url: imgsrc
      }
    })

  }).catch(err => {
    console.log('err', err);
  })

})

注意：需要事先配置好express中的静态资源目录，不知道的同学可以百度下

app.use('/img/', express.static(path.join(__dirname, './public')))

我是把图片放在public下，这样就能实现了微信上传图片至服务器上了，存入数据库的话拿到方法返回的路径即可

由于每个人遇到的问题、项目不同，建议多看几遍，不懂得概念及时百度了解，我也是摸坑实现的。

二、前端上传图片至七牛云、node保存至数据库

我们先简单了解下整个过程

后端生成七牛云token传给前端-------前端拿到后请求相关地址上传图片，得到网络图片-----------------调用相关接口，传入得到的图片

先贴上七牛云官网，先注册如下图

https://portal.qiniu.com/signup

在这里进入存储空间，创建完了后是这样的

生成密钥

以上准备工作大致完成了，若还是不理解，可看一下其他博文七牛云这块详细的教学

一、node代码部分

1、安装依赖

npm i qiniu

2、创建相关文件

qiniu_config.js

//七牛云配置文件
const qiniu = require('qiniu')

// 创建上传凭证（accessKey 和 secretKey在七牛云个人中心中有，lytton是七牛云刚才创建的空间名称）
const accessKey = ''
const secretKey = ''
const mac = new qiniu.auth.digest.Mac(accessKey, secretKey)
const options = {
  scope: 'tianmilitf', //这是你创建存储空间的名子
  deadline: 1695523678 //这是七牛云生成token的有效期，单位时秒，不设置默认是3600S，一串数字是时间戳
}
const putPolicy = new qiniu.rs.PutPolicy(options)
const uploadToken = putPolicy.uploadToken(mac)

module.exports = {
  uploadToken  //导出的是七牛云生成的token，很重要
}

通过接口方式传给前端

//前端获取到七牛云返回的token
router.post('/getQniuToken', (req, res) => {
  console.log('输出下七牛云的token', uploadToken);
  res.send({
    status: 200,
    qiniu_token: uploadToken,
    messages: '获取成功'
  })
})

二、前端代码部分

一定要细读我代码的注释！！！