這段時間作了一個上傳下載文件的項目，先後端代碼都是本身寫的，用了一些很方便的工具，記錄一下。(使用的是單文件上傳)能夠上傳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));
以上就是先後端文件的上傳下載的所有代碼