使用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