本篇宗旨是实打实尽量教会读者去做;所有不讲太多原理;只讲怎么做;同时也是个人学习记录
在上传图片中我们需要知道有几种方式
1、node把前端上传的图片转成base64格式;直接存入数据库(不推荐)
2、前端上传本地图片、服务器接受后存入文件夹、返回该图片路径给前端同时保存在数据库中
3、前端上传图片至第三方平台(阿里云/腾讯云的OSS、七牛云上)
本文主讲2、3的方式
阅读时希望读者能懂基本的express
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); } }) } }) },
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下;这样就能实现了微信上传图片至服务器上了;存入数据库的话拿到方法返回的路径即可
由于每个人遇到的问题、项目不同;建议多看几遍;不懂得概念及时百度了解;我也是摸坑实现的。
我们先简单了解下整个过程
后端生成七牛云token传给前端-------前端拿到后请求相关地址上传图片;得到网络图片-----------------调用相关接口;传入得到的图片
先贴上七牛云官网;先注册如下图
https://portal.qiniu.com/signup
在这里进入存储空间;创建完了后是这样的
生成密钥
以上准备工作大致完成了;若还是不理解;可看一下其他博文七牛云这块详细的教学
npm i qiniu
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传给前端而已;当然也可以把前端拿到的图片存入数据库
相关知识看不懂的及时百度一下;我也是基于自己的环境去总结;希望能帮助到你