node怎么上傳頭像到七牛云然后更換頭像映穗，之前也做過(guò)這個(gè)小功能.
個(gè)人說(shuō)說(shuō)如何實(shí)現(xiàn)以及幾個(gè)坑點(diǎn).前端基于vue(基于什么都無(wú)所謂),后端node+express
前端代碼
拿到圖片流 發(fā)送到后端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 對(duì)象
var reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = (e) => {
// e.target.result 就是要上傳到后端的圖片流 base64
// 一般情況下不會(huì)選擇完圖片就立刻請(qǐng)求上傳接口
// 有可能進(jìn)行裁切，旋轉(zhuǎn)等等操作 點(diǎn)擊確定之后才將數(shù)據(jù)流上傳到后端
}
這里有個(gè)問(wèn)題: 如果你想上傳多張圖片到后端 比如 files = [{img1:xx}, {img2: xx}] express 需要序列化之后才能接收到對(duì)象類型 => JSON.stringify(files)
創(chuàng)建七牛云存儲(chǔ)
創(chuàng)建一個(gè)七牛云賬號(hào): 創(chuàng)建一個(gè)對(duì)象存儲(chǔ)幕随，不懂請(qǐng)百度...
新建存儲(chǔ)空間: 一定要選擇華東 不然后面會(huì)上傳失敗.
假設(shè)我創(chuàng)建了一個(gè)空間名為: 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({
// 秘鑰在控制模板->個(gè)人中心->密鑰管理中可以看到
accessKey: '填寫你的秘鑰',
secretKey: '填寫你的秘鑰',
// 空間名
bucket: bucket,
// 這個(gè)是你要生成的前綴（你的外鏈地址蚁滋，可以在空間中查看）
// 其實(shí)寫不寫都行，不寫后面也得寫.
origin: 'http://ouibvkb9c.bkt.clouddn.com'
})
如下圖:
image.png
配置已經(jīng)完成,寫接口 用的是express赘淮， koa同理
主要做法是先接收前端的圖片流 轉(zhuǎn)換成圖片寫入本地image文件中辕录，然后再存儲(chǔ)到七牛云，再將本地生成的圖片刪除梢卸，需要新建一個(gè)image文件夾
// 上傳圖片
router.post('/upload', function (req, res, next) {
// 接收前端圖片數(shù)據(jù)流
var imgData = req.body.imgData;
// 構(gòu)建圖片名 這個(gè)主要是生成唯一圖片名字利于存儲(chǔ) 當(dāng)然為了方便就寫時(shí)間戳 實(shí)際開(kāi)發(fā)可千萬(wàn)別 可能出現(xiàn)兩人同一時(shí)間
var fileName = Date.now() + '.png';
// 構(gòu)建圖片路徑 需要在上一層目錄下新建一個(gè)image
var filePath = './image/' + fileName;
// 過(guò)濾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 代表我要存在七牛云這個(gè)路徑下 您隨意
// 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
大功告成走诞，如此就將前端發(fā)送過(guò)來(lái)的圖片流成功上傳到七牛云上，最后再寫一個(gè)更換頭像路徑的接口就好了.
