Alan`s blog -- 文件上传模块

文件上传前端这边用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');
}

注意：multer处理的文件名需要自己根据实际判断文件后缀自行添加。简单粗暴又实用的帖子哈哈。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!