本篇宗旨是实打实尽量教会读者去做，所有不讲太多原理，只讲怎么做，同时也是个人学习记录
在上传图片中我们需要知道有几种方式
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: '获取成功'
})
})
二、前端代码部分
一定要细读我代码的注释！！！
wxml
<view>
<button bindtap="onUphand_qiniu">通过七牛云上传图片</button>
</view>
wxjs
onUphand_qiniu() {
//先调取接口，获得七牛云的token
wx.chooseMedia({
count: 1,
mediaType: ['image', 'video'],
sourceType: ['album', 'camera'],
maxDuration: 30,
camera: 'back',
success(res) {
let file = res.tempFiles[0].tempFilePath
//下面的key是自己拿时间戳和随机数组成的key值
let key = new Date().getTime();
qiniu_token().then(res => { //这里调用相关接口，拿到上面说过的七牛云token！
console.log('res', res.data.qiniu_token);
let qiniu_token = res.data.qiniu_token
wx.uploadFile({
filePath: file,
name: 'file',
url: 'https://up-z2.qiniup.com', //该路径是七牛云你选择存储空间的地区，我这里是华南，如果不知道自己的是多少，就百度下关键字
formData: { //请求中额外的其他form-data
'key': key, //key值
'token': qiniu_token //七牛云token值
},
success: function (uploadFileRes) {
//uploadFileRes 返回了data是一个json字符串
//拿到里面的key拼接上域名，再反出去就ok了
let strToObj = JSON.parse(uploadFileRes.data);
console.log("uploadFileRes", strToObj)
let backUrl = "http://riiiff25b.hn-bkt.clouddn.com/" + strToObj.key; //这里请求的地址是测试域名，也是七牛云给的
// data.success(backUrl); //反出去链接
console.log('成功的图片链接', backUrl)
//成功拿到url后，再次调用接口，将七牛云反的链接添加到用户表即可
},
fail: function () {
console.log('err');
}
})
})
}
})
},
这样就实现了图片上传，切记关键点是后端拿到七牛云token后传入前端，前端配置好后用七牛云token请求七牛云相关域名，得到返回，这里我们自己后端做的事情就是把七牛云token传给前端而已，当然也可以把前端拿到的图片存入数据库
相关知识看不懂的及时百度一下，我也是基于自己的环境去总结，希望能帮助到你