文件上传前端这边用FormData做处理。
话不多说直接贴代码最简单粗暴。
let files = this.refs.uploadAvatar.files;
if (files.length > 1) {
console.info('只能上传一个图片哦~');
return false;
} else if (files[0].size > 20 * 1000) {
console.info('上传的图片不能超过200KB哦');
return false;
}
let formData = new FormData();
formData.append('name', files[0]);
axios.post('/api/user/upload-avatar', formData, {
headers: {
'Content-Type': 'multiple/form-data'
}
}).then(res => console.log(res));
前端这边请求我用axios请求库,有兴趣的朋友可以去了解一下他的用法。
FormData实例append方法第一个参数为数据的键名,第二个参数为数据,就是这么简单就可以实现文件上传的请求!
node端呢使用multer,multer使用方法很简单,最重要的是有中文文档!你还不去了解一下吗!直接贴代码!
function initMulter() {
// 使用diskStorage让文件保存在本地
let storage = multer.diskStorage({
// 目的地
destination(req, file, cb) {
cb(null, path.resolve(__dirname, './dest'));
},
// 文件名
filename(req, file, cb) {
let ext;
file.originalname.replace(/\.\w+$/, function(val) {
ext = val;
});
cb(null, `name${ext}`);
}
});
let upload = multer({
storage,
limits: {
files: 1, // 单词上传文件数
fileSize: 200 * 1000, // 文件大小不能超过 xx b
fieldNameSize: 10, // form中name值不能超过 xx b
}, // 超过限制会报错,用错误中间件捕获判断err.code为那种限制
fileFilter(req, file, cb) {
// cb第一个参数为错误对象,若传入则会报错,第二个参数布尔值,表明是否可接受该文件
cb(null, true);
}
});
// 返回的这个家伙作为express中间件即可!
return upload.single('name');
}
注意:multer处理的文件名需要自己根据实际判断文件后缀自行添加。
简单粗暴又实用的帖子哈哈。