【问题标题】:File upload won't work with angular-file-upload and Spring文件上传不适用于 angular-file-upload 和 Spring
【发布时间】:2017-02-04 19:25:58
【问题描述】:

我正在尝试使简单的文件上传成为可能,但 Spring 不想和我一起玩。

这是文件上传的端点 - 目前没有做很多:

@PostMapping(WordEmbeddingApiPaths.UPLOAD_MODEL)
@RequestMapping(method=RequestMethod.POST, consumes = {"multipart/form-data"})
public ResponseEntity<WordVectorListDto> uploadModel(
        @ModelAttribute("file") MultipartFile file,
        // @RequestBody Object obj,
        RedirectAttributes redirectAttributes) {

    LOGGER.debug("POST uploadModel");

    return new ResponseEntity<WordVectorListDto>((WordVectorListDto)null, HttpStatus.OK); 
}

我尝试了几件事,但都以不同的错误告终。我刚刚尝试使用@RequestBody,因为我认为这可能是诀窍,但后来我得到一个例外:

Content type 'multipart/form-data;boundary=----WebKitFormBoundarycV8dFSvDV6U9OwJq' not supported

Content type 'multipart/form-data' not supported

取决于我刚刚尝试过的。

如果我选择@RequestPart("file") MultipartFile file 我明白了

Required request part 'file' is not present

@RequestParam("file") 与此类似。

我不知道这有什么困难,但我希望有人能告诉我如何从客户端获取该文件。

您可以在下面看到我发送到端点的请求:

这个请求可以吗?


网络客户端:

var uploader = $scope.uploader = new FileUploader({
    url: 'http://localhost:8080/rest-api/dl4j/we/uploadModel'
});

uploader.onAfterAddingFile = function($modelFile) {

    console.info('onAfterAddingFile', $modelFile);

    var fd = new FormData();        
    fd.append('file', $modelFile.file);

    $http.post($modelFile.url, fd, {
        headers: {
            'Content-Type': undefined
        },
        transformRequest: angular.identity          
    })
    .then(
        function (data) {
            alert("upload success");
        }, 
        function (data, status) {
            alert("upload error");
        }
     );
};  

index.html

<label class="btn btn-default btn-file" style="float:right;">
    Upload 
    <input 
        type="file" 
        style="display: none;"
        name="file"     
        multiple    
        nv-file-select                  
        uploader="uploader">
</label>

【问题讨论】:

标签: angularjs spring http angular-file-upload


【解决方案1】:

这是我的做法:

 @RequestMapping(value="/uploadFile", method=RequestMethod.POST)
            public @ResponseBody String handleFileUpload(
                    @RequestParam("file") MultipartFile file){
                String name = "test11";
                if (!file.isEmpty()) {
                    try {
                        byte[] bytes = file.getBytes();
                        BufferedOutputStream stream =
                                new BufferedOutputStream(new FileOutputStream(new File(name + "-uploaded")));
                        stream.write(bytes);
                        stream.close();
                        return "You successfully uploaded " + name + " into " + name + "-uploaded !";
                    } catch (Exception e) {
                        return "You failed to upload " + name + " => " + e.getMessage();
                    }
                } else {
                    return "You failed to upload " + name + " because the file was empty.";
                }
            }

别忘了注册多部分解析器:

@Bean
public MultipartResolver multipartResolver() {
    org.springframework.web.multipart.commons.CommonsMultipartResolver multipartResolver = new org.springframework.web.multipart.commons.CommonsMultipartResolver();
    multipartResolver.setMaxUploadSize(10000000);
    return multipartResolver;
}

这里是 html 代码...看看输入字段的名称/ID .. 要上传的文件 1:

    Name1: <input type="text" name="name">


    File2 to upload: <input type="file" name="file">

    Name2: <input type="text" name="name">


    <input type="submit" value="Upload"> Press here to upload the file!
</form>

【讨论】:

  • @RequestParam("file") 不起作用,因为 Spring 一直告诉我参数丢失。
  • 我已经更新了我的anwser ...看看html代码......输入类型文件的名称是......文件
  • 嗯,我有类似的,从screenshot我认为参数设置正确。
  • 好的,不确定,但在截图中你有@RequestHeaders Contentype:multipart/form-data;边界=-----WebKitFormBoundary 我认为边界=-----WebKitBoundary 不属于那里....你有一个ideqa 它来自哪里?
  • 我不确定,我不确定这是从哪里来的,但它可能来自 Angular 的文件上传。但是,我已将客户端的 JavaScript 和 HTML 部分添加到我的问题中。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-08-16
  • 2015-12-01
  • 2017-10-20
  • 2016-02-04
  • 1970-01-01
  • 2019-04-28
  • 2015-03-02
相关资源
最近更新 更多