node怎么上传头像到七牛云然后更换头像，之前也做过这个小功能.
个人说说如何实现以及几个坑点.前端基于vue(基于什么都无所谓),后端node+express
前端代码
拿到图片流 发送到后端node
var file = e.target.files[0]
// 判断是否图片
if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
return false
}
// 主要利用 FileReader 对象
var reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = (e) => {
// e.target.result 就是要上传到后端的图片流 base64
// 一般情况下不会选择完图片就立刻请求上传接口
// 有可能进行裁切，旋转等等操作 点击确定之后才将数据流上传到后端
}
这里有个问题: 如果你想上传多张图片到后端 比如 files = [{img1:xx}, {img2: xx}] express 需要序列化之后才能接收到对象类型 => JSON.stringify(files)
创建七牛云存储
创建一个七牛云账号: 创建一个对象存储，不懂请百度...
新建存储空间: 一定要选择华东 不然后面会上传失败.
假设我创建了一个空间名为: avatar-img-d
后端代码:
下载七牛云模块
地址 https://github.com/node-modules/qn
cnpm i qn -S
code
// 读写文件模块
var fs = require('fs');
// 七牛云模块
var qn = require('qn');
// 空间名
var bucket = 'avatar-img-d';
// 七牛云配置
var client = qn.create({
// 秘钥在控制模板->个人中心->密钥管理中可以看到
accessKey: '填写你的秘钥',
secretKey: '填写你的秘钥',
// 空间名
bucket: bucket,
// 这个是你要生成的前缀（你的外链地址，可以在空间中查看）
// 其实写不写都行，不写后面也得写.
origin: 'http://ouibvkb9c.bkt.clouddn.com'
})
如下图:
image.png
配置已经完成,写接口 用的是express， koa同理
主要做法是先接收前端的图片流 转换成图片写入本地image文件中，然后再存储到七牛云，再将本地生成的图片删除，需要新建一个image文件夹
// 上传图片
router.post('/upload', function (req, res, next) {
// 接收前端图片数据流
var imgData = req.body.imgData;
// 构建图片名 这个主要是生成唯一图片名字利于存储 当然为了方便就写时间戳 实际开发可千万别 可能出现两人同一时间
var fileName = Date.now() + '.png';
// 构建图片路径 需要在上一层目录下新建一个image
var filePath = './image/' + fileName;
// 过滤data:URL
var base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");
var dataBuffer = new Buffer(base64Data, 'base64');
fs.writeFile(filePath, dataBuffer, function (err) {
if (err) {
// 写入失败
res.end(JSON.stringify({status: '102', msg: '文件写入失败'}));
} else {
// 写入成功 上传七牛云 filePath 代表刚刚写入本地图片的路径
// {key: `/avatar/${fileName}`} avatar 代表我要存在七牛云这个路径下 您随意
// fileName 代表刚刚生成的文件名
client.uploadFile(filePath, {key: `/avatar/${fileName}`}, function (err1, result) {
if (err1) {
res.json({
status: '1',
msg: '上传失败'
});
} else {
res.json({
status: '0',
result: {
path: result.url
},
msg: 'suc'
})
}
// 上传之后删除本地文件
fs.unlinkSync(filePath);
});
}
})
})
如下图:
image.png
大功告成，如此就将前端发送过来的图片流成功上传到七牛云上，最后再写一个更换头像路径的接口就好了.
网友评论