nodejs图片的压缩上传和base64的上传接受显示
安装multer中间件和fs，formidable
npm i multer --save
npm i fs --save
npm i formidable --save配置
const fs = require("fs");
const path = require('path');
const multer = require("multer");
//是nodejs中处理multipart/form-data数据格式(主要用在上传功能中)的中间件
var formidable = require('formidable'); //blod处理
//配置diskStorage来控制文件存储的位置以及文件名字等
var storage = multer.diskStorage({
//确定图片存储的位置
destination: function(req, file, cb) {
cb(null, '../demoimg/upload/img')
},
// 
//确定图片存储时的名字,注意，如果使用原名，可能会造成再次上传同一张图片的时候的冲突
filename: function(req, file, cb) {
let md5s = md5(Date.now() + file.originalname)
cb(null, md5s + '.png')
}
});//生成的专门处理上传的一个工具，可以传入storage、limits等配置
var upload = multer({
storage: storage
});
const singleMidle = upload.single("files"); //一次处理一张
const arrMidle = upload.array("arrayFile", 5); //一次最多处理5张
const fieldsMidle = upload.fields([{
name: "fieldSingleFile",
maxCount: 1
},
{
name: "fieldArrayFile",
maxCount: 4
}
]);1.普通input file文件上传
form的submit还是ajax上传只是获取到inputfile的值传过去，使用此方法不能使用qs或者转成json的数据格式发送，要传二进制格式的数据所以你可以在ajax前端使用URLSearchParams来进行append（’name名称‘，file值）传递
router.post('/uploads', singleMidle, function(req, res, next) {
//线上的也就是服务器中的图片的绝对地址
var tmp_path = req.file.path;
var target_path = 'uploads/' + req.file.path;
fs.readFile(tmp_path, function(err, data) {
fs.writeFile(target_path, data, function(err) {
res.json({
code: 200,
data: target_path
})
})
})
});发送格式：
2.base64位文件文件上传
base64的形式为“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0......”；当接收到上边的内容后，需要将data:image/png;base64,这段内容过滤掉，过滤成：“iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0.......”；然后进行保存。
base64位图片地址后台接收解析一下即可拿到图片，不过这里会遇见图片损坏的问题，经过追梦猪研究发现这里的传递给后台的地址会发现缺少+号，用正则替换一下或者encodeURIComponent转一下即可
router.post('/upload', singleMidle, function(req, res, next) {
//接收前台POST过来的base64
var imgData = req.body.imgData;
//过滤data:URL
var base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");
var timestamp = Date.parse(new Date());
var dataBuffer = Buffer.from(base64Data, 'base64');
var name = timestamp.toString() + ".jpg"
// 写入的地址
fs.writeFile("./public/uploadimages/" + name, dataBuffer, function(err) {
if (err) {
res.send(err);
} else {
// res.send("保存成功！");
console.log()
console.log("服务端接收到了数据啦");
}
})
});发送格式：
3.blod文件文件上传
跟fileinput上传类似，传的是blod对象
router.post('/uploadblod', function(req, res, next) {
//接收前台POST过来的uploadblod
var uploadDir = path.normalize(__dirname + '/' + "../index")
var form = new formidable.IncomingForm();
form.uploadDir = uploadDir;
form.parse(req, function(err, fields, files) {
console.log(files)
console.log(files.file.path)
if (err) {
res.json({
"result": '-1',
"msg": '保存失败'
})
return
}
console.log(req)
var oldpath = files.file.path;
var newpath = oldpath + req.body.filetitle;
console.log(newpath)
//newpath：用于修改文件名，因为默认保存的文件是没有后缀的
//未修改文件名时的例子：upload_7bd3302059acb15419974e2907b099fd
fs.rename(oldpath, newpath, (err) => {
//改变上传文件的存放位置和文件名
if (err) {
res.json({
"result": '-2',
"msg": '保存失败'
})
return
}
res.json({
"result": '0',
"msg": '保存成功'
})
})
});
});