文件上传前端使用FormData进行处理。话不多说,直接贴代码最简单粗暴。letfiles=this.refs.uploadAvatar.files;if(files.length>1){console.info('你只能上传一张图片~');returnfalse;}elseif(files[0].size>20*1000){console.info('上传的图片不能超过200KB');returnfalse;}letformData=newFormData();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的使用方法很简单,最重要的是有中文文档!何不去一探究竟!直接贴代码!functioninitMulter(){//使用diskStorage在本地保存文件letstorage=multer.diskStorage({//destination(req,file,cb){cb(null,path.resolve(__dirname,'./dest'));},//文件名filename(req,file,cb){letext;file.originalname.replace(/\.\w+$/,function(val){ext=val;});cb(null,`name${ext}`);}});letupload=multer({storage,limits:{files:1,//上传文件个数fileSize:200*1000,//文件大小不能超过xxbfieldNameSize:10,//表单中的name值不能超过xxb},//超过限制会报错,错误中间件会捕获并判断err.code是那个限制fileFilter(req,file,cb){//cb是第一个参数为错误对象,传入则报错,第二个参数为布尔值,表示文件是否可接受cb(null,true);}});//返回的guy可以用作express中间件!返回上传。single('name');}注意:multer处理的文件名需要根据实际的文件后缀来判断加一个简单粗暴实用的贴子哈哈。
