文件上传前端这边用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使用方法很简单,最重要的是有中文文档!你还不去了解一下吗!直接贴代码!node
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处理的文件名须要本身根据实际判断文件后缀自行添加。
简单粗暴又实用的帖子哈哈。ios