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

时间:2022-09-25 08:36:40 作者:快盘下载人气:43

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

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

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+express+微信小程序+七牛云实现上传图片

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

生成密钥

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

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

一、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传给前端而已;当然也可以把前端拿到的图片存入数据库

相关知识看不懂的及时百度一下;我也是基于自己的环境去总结;希望能帮助到你

加载全部内容

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

	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);
	}
	})
	}
	})
	},

	//上传单个图片的方法
	// 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;

	//上传图片的方法
	// 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);
	})

	})

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

	//七牛云配置文件
	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: ;获取成功;
	})
	})

	<view>

	<button bindtap=;onUphand_qiniu;>通过七牛云上传图片</button>
	</view>

	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;);
	}
	})

	})

	}
	})

	},

	npm i qiniu