这段时间作了一个上传下载文件的项目，先后端代码都是本身写的，用了一些很方便的工具，记录一下。(使用的是单文件上传)能够上传100M之内的大文件，亲测没问题。node
前段用的框架是react和ant design，后端用的feathersJS。react
前段文件上传用的是ant design自带的组件，Upload.数据库
render() {
let that = this;
const prop= {
name: 'uri', //名字要跟后台对应
action: "http://192.168.137.253:3030/uploads",
// headers:{'Content-Type':'multipart/form-data'},
onChange(info) {
let file = info.fileList[0];
const fileSize = (file.size / (1024 * 1024)).toFixed(2); //得到文件大小
const name = file.name; //得到文件名
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList);
that.props.getSize(fileSize,name) //传给父级
}
if (info.file.status === 'done') {
message.success(`${info.file.name} file uploaded successfully`);
} else if (info.file.status === 'error') {
message.error(`${info.file.name} file upload failed.`);
}
},
};
return (
<Upload {...prop}>
<Button>
<Icon type="upload" /> Click to Upload
</Button>
</Upload>
);
}
不用Ant design的话，能够使用FileRender.express
importfile = (ev) => {
var _this = this;
var file = ev.target.files[0];
if (window.FileReader) {
var fr = new FileReader();
if (window.FileReader) {
var fr = new FileReader();
fr.addEventListener('load', function () {
var upload = uploadService
.create({uri: fr.result}) //跟后台名字对应
.then(function(response){
// success
});
}, false);
fr.readAsDataURL(file);
}
}
}
后端须要导入multer插件，json
const multer = require('multer');
首先要注意的是，feathers是基于express开发的，它对接收的文件大小有限制，咱们须要更改一下，后端
app.use(express.json({limit: '100mb'}));
app.use(express.urlencoded({ extended: true, limit: '100mb' }));
我这边上传文件有页面传入和接口传入两种，下载文件就是接口下载；mvc
先说上传文件，upload是页面的上传，importfile是接口上传app
先要配置multer，框架
新建multerUtil.js,工具
const multer=require('multer');
const storage = multer.diskStorage({
//设置上传后文件路径，uploads文件夹会自动建立。
destination: function (req, file, cb) {
cb(null, './src/uploads')
},
//给上传文件重命名，获取添加后缀名
filename: function (req, file, cb) {
let fileFormat = file.originalname;
cb(null, fileFormat)
}
});
// //添加配置文件到muler对象。
const upload = multer({
storage: storage
});
//如需其余设置，请参考multer的limits,使用方法以下。
//var upload = multer({
// storage: storage,
// limits:{}
// });
//导出对象
module.exports = upload;
具体如何配能够看这个http://cnodejs.org/topic/564f32631986c7df7e92b0db
再建一个testController.js文件，导入multerUtil.js
const muilter = require('./multerUtil');
//multer有single()中的名称必须是表单上传字段的name名称。
const upload=muilter.single('uri');
exports.dataInput = function (req, res) {
upload(req, res, function (err) {
//添加错误处理
if (err) {
return console.log(err);
}
//文件信息在req.file或者req.files中显示。
//console.log(req);
res.send(200);
});
}
//若是还须要其余的服务，能够把app传过来
exports.fileInput = function (app) {
return function (req, res) {
upload(req, res, function (err) {
//添加错误处理
if (err) {
return console.log(err);
}
//文件信息在req.file或者req.files中显示。
// console.log(req.file);
if (req.method === 'POST') {
//这里面能够对数据库进行操做
app.service('mvc-filedata').find()
.then(function (result, err) {
if (err) throw err;
//这里写须要的操做
res.send(200);
});
}
else {...}
});
}
};
写完后，只须要回到app.js把文件引入就好
app.post('/uploads',testController.dataInput);
app.post('/importfile',testController.fileInput(app));
以上，上传的代码就写完了，下面是下载的代码
找到src/middleware文件夹，创建文件export-file.js;
var fs = require('fs');
var path = require('path');
module.exports =function (app) {
return function (req, res, next) {
if (req.method === 'GET') {
// console.log(req.url.split("/")[1],"结束");
app.service('mvc-filedata').find({query: { address:req.url.split("/")[1] }})
.then(function (result, err) {
if (err) throw err;
console.log(result.data);
var file = 'F:/work/VMC/VMC-services/service-host/src/uploads/'+ result.data[0].address; //文件的地址
res.download(file);
});
}
else {
}
};
};
再回到APP,引入便可
const middlewarefilexport = require('./middleware/export-file');
app.use('/exportfile',middlewarefilexport(app));
以上就是先后端文件的上传下载的所有代码