核心步骤：将base64转为buffer并用fs.write()存入.png文件中，即可得到一张可展示的图片，将其路径写入数据库即可。非二进制或blob对象
第一：获取图片文件，将其转为base64，通过axios发送至后台node.js服务器
HTML：
methods中：
getBase64(file) {
return new Promise(function (resolve, reject) {
let reader = new FileReader();
let imgResult = "";
reader.readAsDataURL(file);
reader.onload = function () {
imgResult = reader.result;
};
reader.onerror = function (error) {
reject(error);
};
reader.onloadend = function () {
resolve(imgResult);
};
});
},
readySubmitFile(fileList) {//将准备提交的多张图片转为base64
let _this = this;
if (!(fileList instanceof Array) || fileList.length <= 0) {
return false;
}
_this.fileMessage.fileNameArr = [];
_this.fileMessage.fileBase64Arr = [];
for (let i = 0; i < fileList.length; i++) {
_this.fileMessage.fileNameArr.push(fileList[i].name);
_this.getBase64(fileList[i].raw).then(
(res) => {
// console.log(res);
_this.fileMessage.fileBase64Arr.push(res);
},
(err) => {
console.log(err, "转码失败");
}
);
}
// console.log(fileList);
return true;
},
随后提交前转码通过axios上传即可
第二，是node.js部分。注意新版node逐步废除new Buffer()，说是会有安全问题。官方推荐用Buffer.from()代替。
这里我用的是koa框架（基于eapress开发而来），ctx.request.body.img.fileBase64Arr[0]即为前端传过来的base64
const dataBuffer = Buffer.from(`${ctx.request.body.img.fileBase64Arr[0].replace(/^data:image\/\w+;base64,/, "")}`, 'base64'); //去除base64的头部
fs.writeFile(`./SaveImage/${ctx.request.body.img.fileNameArr[0]}${ctx.request.body.time}.png`, dataBuffer, function (err) {
if (err) {
return console.log('写入失败，上级路径有误，无法创建该文件' + err)
} else {
console.log('写入成功！err为空');
}
})
随后将相对路径字符串存入数据中即可