使用FormData上傳文件

Table of Contents

• 1. 什麼是FormData，有什麼作用
• 2. 使用FormData上傳文件
• 3. 思路整理

什麼是FormData，有什麼作用

MDN-FormData 上面寫到FormData可以更容易的構建出key/value的形式，並可以方便使用XMLHttpRequest.send()方法，在請求的時候會將content-type設置爲multipart/form-data；

使用FormData上傳文件

<input type="file"  class="file-uploader form-control" {{action 'uploadPmBp' on='change'}}>

uploadPmBp: function() {
    var files = $('.file-uploader')[0].files;

    this.get('pmFileService').importFile(files[0]).then(res => {
      console.log(res);
    })
  }

/**
 * pmFileService.importFile方法
 */
importFile: function(file) {
  var url = "/pm/bp/info/importFile";
  //生成發請求數據對象
  var data = new FormData();
  data.append('file', file);
  return $.ajax({
    url: url,
    dataType: 'json',
    cache: false,
    contentType: false,
    processData: false,
    data: data,
    type: 'POST',
    success: function(response) {
      return response;
    }
  });
}

/**
 * 處理導入文件信息
 *  @return BaseResultVO
 */
@RequestMapping(method = RequestMethod.POST, value = "/importFile")
@ResponseBody
public BaseResultVO importFile(@RequestParam("file") MultipartFile[] fileList) {
    return JsonResultUtil.getResult(pmBpAppInfoOperateManager.importFile(fileList));
}

思路整理

• 使用bootstrap的file組件
• 在js當中獲取此class所包涵的文件信息 $(‘.file-uploader’)[0].files;
• 獲取file後，new FormData().append(‘file’,file)
• 利用ajax將請求發送至後端；注意 dataType可以使用json