文件上传前端这边用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,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,cb) { // cb第一个参数为错误对象,若传入则会报错,第二个参数布尔值,表明是否可接受该文件 cb(null,true); } }); // 返回的这个家伙作为express中间件即可! return upload.single('name'); }原文链接:https://www.f2er.com/react/304324.html