express 上传文件的原理和实现
1.原理
1.1 要想了解express上传 我们先看看 nodejs原生上传是怎么实现的
let server = require('http').Server(app);
server.listen(3000);
首先为了让express拥有原始http模块的一些功能
请不要使用 bodyParser 之类的中间件 因为不会next到这里 保持尽量原生。
app.post('/upload', async(req, res)=>{
var postData = '';
req.on("data", function(postDataChunk) { // 有新的数据包到达就执行
postData += postDataChunk;
});
req.on("end", function() { // 数据传输完毕
console.log(postData);
res.end('up success');
// console.log('post data finish receiving: ' + postData );
});接下来前端模拟一个post请求 ajax form表单都行 假设我们传了个
<form action="/cos/upload"
enctype="application/x-www-form-urlencoded"
method="post">
<p>
What is your name? <input type="text" name="name"><br>
<button class="btn-save" type="submit" >提交</button>
</p>
</form>在 post的 content-type="application/x-www-form-urlencoded" 下 后台console.log` 的 postData 应该是 name=xxx
这时候通过一些 querystring 之类的中间件解析出 key value数值 以方便我们操作
bodyParser这个中间件也是封装简化了流程 只要直接去req.body里面取就行。但有个弱点 对于file提交 就不能这么玩了！ 那我们继续看看为什么
把 enctype="application/x-www-form-urlencoded" 改成 enctype= multipart/form-data另外增加个文件提交 再准备1个zip文件
<form action="/cos/upload"
enctype="multipart/form-data"
method="post">
<p>
What is your name? <input type="text" name="name"><br>
What files are you sending? <input type="file" name="file" id="file"><br>
<button class="btn-save" type="submit" >提交</button>
</p>
</form>上传zip文件 和填写名称后 后台 console.log 的 postData 大概长这样
------WebKitFormBoundaryXKLAlaggDlZOVroE
Content-Disposition: form-data; name="name"
xxxx
------WebKitFormBoundaryXKLAlaggDlZOVroE
Content-Disposition: form-data; name="file"; filename="wrap.zip"
Content-Type: application/zip
PK?????bL?y??}????? ?wrap.jpgUT ??]?Z??Zux ?????????PS??? ?HBKh?: ?? ?zG " 一堆乱码真的很吓人格式 其实除了乱码 还是有点规律 都通过WebKitFormBoundary 分割 还有一些头信息描述 和 文件内容 如果您想了解这些代表什么 请看 传送门
让我们改进下代码 取消掉name字段 end 里生成文件
req.on("end", function() { // 数据传输完毕
fs.writeFile('./upload/sss.zip',postData,'binary',function(err){ //path为本地路径例如public/logo.png
if(err){
console.log('保存出错！')
res.end('up failed');
}else{
console.log('保存成功!')
res.end('up success');
}
})
// console.log('post data finish receiving: ' + postData );
});这段代码的目的是 接受前端的zip包 然后保存为服务器端的upload文件下sss.zip。 很显然 运行是成功了 也生成了 但双击解压时候就愣逼了 无法打开。 看了下2个zip的大小 很明显已经发送了变化 。原因就出在一些其他的东西也进入了数据体(就是刚才乱码部分) 如果name没取消 那么信息将会更混乱 怎么解决呢？其实也很简单 只是少了个解析中间件 当然也有大神手写 根据一定规则 split啊 正则啊
2.formidable
formidable 就是一款解析软件 npm install 下 和 var formidable = require(‘formidable‘)下
app.post('/upload', async(req, res)=>{
var form = new formidable.IncomingForm();
form.uploadDir = "./upload";
//form.keepExtensions = true; 是否保持上传什么后缀 保存什么后缀 默认没有后缀
form.parse(req, function(err, fields, files) {
res.writeHead(200, {'content-type': 'text/plain'});
res.write('received upload:\n\n');
var tmpPath=files.file.path; //临时保存路径
var fileName=files.file.name;
fs.rename(tmpPath,path.resolve(form.uploadDir,fileName),function (err) {
if(err){
console.log('保存出错！')
}
else{
console.log('保存成功!')
}
res.end();
})
});然后打开生成的zip文件。这次能正常解压 说明数据没发生破坏。 formidable 也有很多 事件驱动api 如 progress error 等 具体看文档
这里我原名保存了上传文件 按实际情况定义。
3.Multer
multer 就是一款express官方推荐的上传中间件 。和formidable 差不多 但是官方送的最基础的上传 如果你想扩展功能 如上传进度条,断点续传 阿里oss 腾讯cos 等内容仓库 还要你自己想办法 融进去。github上已经有部分写好的 可以去看看 这里给出我的配置 可以参考参考
let setMulter = require('../util/myMulter');
//文件上传服务
router.post('/upload', function (req, res, next) {
//这是自己写的一个封装势力 为了想以后扩展
var upload=setMulter('file',1);
upload(req, res, function (err) {
try {
if (err) throw err;
if(req.files.length==0) throw new Error("不能上传空文件"); //官方没有空文件的办法 再这里添加
res.send('文件上传成功');
}
catch (err) {
console.log(err.message);
res.send(`文件上传失败,原因:${err.message}`);
}
});
});** myMulter.js **
let path=require('path');
let multer = require('multer');
//api https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md
let dir=path.resolve(__dirname,'../upload');
const mimes = {
'.png': 'image/png',
'.gif': 'image/gif',
'.jpg': 'image/jpeg',
'.jpeg': 'image/jpeg',
'.zip':'application/zip'
};
//定义仓库
const storage = multer.diskStorage({
//Note:如果你传递的是一个函数，你负责创建文件夹，如果你传递的是一个字符串，multer会自动创建
destination: function (req, file, cb) {
cb(null, dir);
},
//获取文件MD5，重命名，添加后缀,文件重复会直接覆盖
filename: function (req, file, cb) {
var ext =(file.originalname).split('.').pop();
cb(null, `${file.fieldname}-${Date.now()}.${ext}`);
}
});
//定义过滤器
const fileFilter =function (req, file, cb) {
// 指示是否应接受该文件
var test = Object.values(mimes).filter(function(type) {
return type===file.mimetype;
})
// 接受这个文件，使用`true`，像这样:
if(test){
cb(null, true);
}else{ // 拒绝这个文件，使用`false`，像这样:
cb(new Error('file mimes not allow!'), false);
}
}
//定义限制
const limits={
fileSize:1024 * 1024 * 30
};
module.exports=function(opt) {
return multer({
storage: storage,
fileFilter:fileFilter,
limits: limits,
}).array(opt);
};如果你想添加进度条 请参考 这个
4.COS
目前再研究中。。。