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, 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处理的文件名需要自己根据实际判断文件后缀自行添加。
简单粗暴又实用的帖子哈哈。

    原文作者:我爱学习
    原文地址: https://segmentfault.com/a/1190000008992912
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞