nodejs環(huán)境下接收FormData數(shù)據(jù)的模塊居多嘀趟,但是正常原生是如何實(shí)現(xiàn)的?
模塊實(shí)現(xiàn)轉(zhuǎn)FormData的大多用的有 : multer
、connect-multiparty
等等
然而肩豁,搜索到的原生實(shí)現(xiàn)甚少。
下面代碼即為nodejs原生實(shí)現(xiàn)接收post傳參從formData里取值
前端代碼 -> axios react
/* 前端使用 axios react */
var files = new FormData() //實(shí)例formdata
files.append('file',this.refs.file.files[0]) //添加要上傳的文件 無(wú)關(guān)類型
Axios.post('/upload/file',files,config ) //接口post 發(fā)送請(qǐng)求 附送 上傳文件 file
.then((res)=>{
console.log(res.data) // 上傳成功返回
this.setState({img:`https://${res.data.data.Location}`})
})
.catch(err => {
console.log(err) // 上傳失敗 錯(cuò)誤 返回
})
FormData
如圖凉泄,數(shù)據(jù)請(qǐng)求時(shí)FormData是這樣的躏尉,那么我們就需要拿到這些數(shù)據(jù)給他截取出來(lái)相應(yīng)的數(shù)據(jù)
實(shí)際操作——nodejs 代碼
let uuid = () => { //生成uuid方法
let s = [];
let hexDigits = "0123456789abcdef";
for (let i = 0; i < 36; i++) {
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
}
s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
s[8] = s[13] = s[18] = s[23] = "-";
let uuid = s.join("");
return uuid;
}
router.post('/file', (req, res, next) => { //post請(qǐng)求 我這邊用的是express router
req.setEncoding('binary');
let body = ''; // 文件數(shù)據(jù)
// 邊界字符串
let boundary = req.headers['content-type'].split('; ')[1].replace('boundary=', '');
//接收post如data 流 buffer
req.on('data', function (d) {
body += d;
});
req.on('end', function () {
let file = querystring.parse(body, '\r\n', ':');
let fileInfo = file['Content-Disposition'].split('; ');
let fileName = '';
let ext = '';
for (let value in fileInfo) {
if (fileInfo[value].indexOf("filename=") != -1) {
fileName = fileInfo[value].substring(10, fileInfo[value].length - 1);
if (fileName.indexOf('\\') != -1) {
fileName = fileName.substring(fileName.lastIndexOf('\\') + 1);
}
ext = fileName.substr(fileName.indexOf('.') + 1, fileName.length);
}
}
let upperBoundary = body.toString().indexOf(file['Content-Type'].substring(1)) + file['Content-Type'].substring(1).length;
let binaryDataAlmost = body.toString().substring(upperBoundary).replace(/^\s\s*/, '').replace(/\s\s*$/, '');
// 上傳文件重命名
let uuidFileName = `${uuid()}.${ext}`
//上傳文件 本地存放地址
let uploadDirFile = `./${uuidFileName}`
//創(chuàng)建文件流
let writerStream = fs.createWriteStream(uploadDirFile);
//開(kāi)始 —— 寫(xiě)入文件到本地
writerStream.write(binaryDataAlmost.substring(0, binaryDataAlmost.indexOf(`--${boundary}--`)), 'binary');
//寫(xiě)入完成
writerStream.end();
writerStream.on('finish', function () {
console.log("寫(xiě)入完成。");
//刪除剛剛創(chuàng)建好的本地文件 -> 只有在把文件存起來(lái)的時(shí)候需要?jiǎng)h除掉本地后众,否則不要用胀糜。
fs.unlinkSync(uploadDirFile)
res.send({ data: data, code: 0, msg: 'ok' })
});
});
})
相對(duì)簡(jiǎn)單吧
直接復(fù)制粘貼即可用。