时间戳

首页 > 解决方案 > 将文件从 AngularJS 上传到 Spring Boot

angularjs - 将文件从 AngularJS 上传到 Spring Boot

问题描述

我正在使用 AngularJS 来制作我的前端，而使用 Spring Boot 的 Java 来制作我的后端。我正在尝试将 xlsx、xls 或 ods 文件从 Angular 导入/上传到我的 Java，但无论我做什么，请求都不会发送我的文件！

Java端点：

@PostMapping(value = "/upload/{type}")
@ResponseBody
private ResponseEntity<List<Rota>> importFile(@PathVariable("type") String type,
                                              @RequestParam(required = false, value = "file") MultipartFile fileParam, 
                                              @RequestBody MultipartFile  file) {
    System.out.println("File: " + file.getName());
    if(type.toUpperCase().equals("XLSX")){
        System.out.println("XLSX!");
    }else if(type.toUpperCase().equals("XLS")){
        System.out.println("XLS!");
    }else if(type.toUpperCase().equals("ODS")){
        System.out.println("ODS!");
    }else{
        System.out.println("OPS!");
        return new ResponseEntity<>(new ArrayList<>(), HttpStatus.UNSUPPORTED_MEDIA_TYPE);
    }
    return new ResponseEntity<>(new ArrayList<>(), HttpStatus.OK);
}

我的请求 ID 是使用准备只发出请求的 Angular 类制作的。我这里贴出我们在项目中正常使用的代码和实际工作但我无法使用的代码。

数据工厂：

DataFactory.POST = function (url, entity, config = null) {
  if (url && entity) {
    return $http
      .post(url, entity, config)
      .then(res => $q.resolve(res.data), error => $q.reject(error));
  }
};

实际工作的代码：

var xhr = new XMLHttpRequest;
xhr.open('POST', `${URL.CTM_ODS()}/rotas/upload/${type}`, true);
xhr.send(formData);

当我使用邮递员时，通过正文发送文件，后端收到空值，但是当我使用邮递员的表单数据时，工作正常！使用 DataFactory 我在后端得到了以下堆栈：

WARN 16796 --- [p1002886236-126] org.eclipse.jetty.http.HttpParser        : badMessage: java.lang.IllegalStateException: too much data after closed for HttpChannelOverHttp@78fd8670{r=2,c=false,a=IDLE,uri=}

标签： angularjsspring-bootfilehttprequest

解决方案

在此视频中找到了答案：https ://www.youtube.com/watch?v= vLHgpOG1cW4 我的问题是 AngularJS 反序列化文件！所以，我所做的只是放置一个配置对象说不要这样做：

DataFactory.POST(`${URL.CTM_ODS()}/rotas/upload/${type}`, formData, { transformRequest: angular.indentity, headers: { 'Content-Type': undefined } }).then(response => {
    delete vm.importacao.arquivoCsv;
    console.log('Response: ', response);
    LoadingManager.hide();
  });

如您所见，不同之处在于标头对象，您能看到我们将内容类型传递为 undefined 和transformRequest: angular.indentity吗？这对我有用！如果有人有其他方法，请随时发表评论！感谢，并有一个愉快的一天！

推荐阅读