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

前端之家收集整理的这篇文章主要介绍了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处理的文件名需要自己根据实际判断文件后缀自行添加。简单粗暴又实用的帖子哈哈。

猜你在找的React相关文章