阅读 3014

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对象会包含文件名等信息。
关注下面的标签,发现更多相似文章
评论