Js+Node.JS 完成文件上傳

FormDate 對象使用一些鍵值對來模擬一個完整的表單，然后使用ajax發送這個 FormData 對象，后端便可以拿到表單中上傳的文件。

前端處理

HTML代碼

<form>
    <input type="file" id="uploadFile" name="file">
</form>

如果只想上傳圖片：

<input id="uploadFile" type="file" name="file" accept="image/png,image/gif"/>

可配置屬性：

• accept：表示可以選擇的文件MIME類型，多個MIME類型用英文逗號分開，常用的MIME類型見下表。
• multiple：是否可以選擇多個文件，多個文件時其value值為第一個文件的虛擬路徑。

常用MIME類型

javascript代碼

$('#uploadFile').on('change',function(e){
    var file = this.files[0];

    var formData = new FormData();
    formData.append('file',file);

    $.ajax({
        url: '/webgl/upload/zip',
        type: 'post',
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success: function(res){
           //
        }
    })
})

這里我是在文件被選擇上傳后就會立即觸發 ajax 上傳文件事件，而表單中其他字段我沒有使用 FormData 對象，所以 <form> 標簽沒有添加 enctype="multipart/form-data" 屬性。

注：

• processData 設置為 false 。因為 data 值是 FormData 對象，不需要對數據做處理。
• cache 設置為 false ，上傳文件不需要緩存。
• contentType 設置為 false 。

nodejs代碼

multer模塊

我使用了 multer 模塊，初始化 multer 模塊配置

var storageZip = multer.diskStorage({
    destination: function(req, file, cb) {
      cb(null, 'public/uploads/zip')        //文件存儲路徑
    },
    filename: function(req, file, cb) {
      cb(null, file.fieldname + '-' + Date.now() + '.zip')    //對文件重新命名，防止文件名沖突
    }
  })

  var uploadZip = multer({
    storage: storageZip
  });

路由配置

app.post('/webgl/upload/zip', uploadZip.single('file'), function(req, res) {
    res.json(req.file)
  })

• 這里 single() 參數名就是使用 FormData.append() 方法添加時的文件名，這里我用的是 file 。
• 上傳結束之后，會把 file 對象返回給前端， file 對象會包含文件名等信息。

來自：https://juejin.im/post/58c64f2b0ce463005479f4d3