js+nodejs完成文件上傳

原文: i.jakeyu.top/2017/01/10/…
做者: Jake

FormData對象使用一些鍵值對來模擬一個完整的表單，而後使用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類型

後綴名	MIME名稱
*.3gpp	audio/3gpp, video/3gpp
*.ac3	audio/ac3
*.asf	allpication/vnd.ms-asf
*.au	audio/basic
*.css	text/css
*.csv	text/csv
*.doc	application/msword
*.dot	application/msword
*.dtd	application/xml-dtd
*.dwg	image/vnd.dwg
*.dxf	image/vnd.dxf
*.gif	image/gif
*.htm	text/html
*.html	text/html
*.jp2	image/jp2
*.jpe	image/jpeg
*.jpeg	image/jpeg
*.jpg	image/jpeg
*.js	text/javascript, application/javascript
*.json	application/json
*.mp2	audio/mpeg, video/mpeg
*.mp3	audio/mpeg
*.mp4	audio/mp4, video/mp4
*.mpeg	video/mpeg
*.mpg	video/mpeg
*.mpp	application/vnd.ms-project
*.ogg	application/ogg, audio/ogg
*.pdf	application/pdf
*.png	image/png
*.pot	application/vnd.ms-powerpoint
*.pps	application/vnd.ms-powerpoint
*.ppt	application/vnd.ms-powerpoint
*.rtf	application/rtf, text/rtf
*.svf	image/vnd.svf
*.tif	image/tiff
*.tiff	image/tiff
*.txt	text/plain
*.wdb	application/vnd.ms-works
*.wps	application/vnd.ms-works
*.xhtml	application/xhtml+xml
*.xlc	application/vnd.ms-excel
*.xlm	application/vnd.ms-excel
*.xls	application/vnd.ms-excel
*.xlt	application/vnd.ms-excel
*.xlw	application/vnd.ms-excel
*.xml	text/xml, application/xml
*.zip	aplication/zip
*.xlsx	application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

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對象會包含文件名等信息。