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處理的文件名須要本身根據實際判斷文件後綴自行添加。
簡單粗暴又實用的帖子哈哈。