Alan`s blog — 檔案上傳模組

我愛學習發表於2017-04-08

檔案上傳前端這邊用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處理的檔名需要自己根據實際判斷檔案字尾自行新增。
簡單粗暴又實用的帖子哈哈。

相關文章