使用 angularjs 和 spring boot 上传文件答案

【问题标题】：uploading files using angularjs and spring boot使用 angularjs 和 spring boot 上传文件
【发布时间】：2021-03-11 19:35:00
【问题描述】：

我在一台服务器上部署了一个angularjs 应用程序，在另一台服务器上部署了一个spring boot 应用程序。

在我的 angularjs 应用程序中，我有一个表单，可以上传文件并通过休息控制器发送，然后该控制器将此文件保存在部署 Spring Boot 应用程序的服务器中的文件夹中。

这是我的休息控制器：

@CrossOrigin(origins="*")
@RestController
public class Upload {

    @RequestMapping(value="/imageUpload", method = RequestMethod.POST)
    public void UploadFile(MultipartHttpServletRequest request) throws IOException {

        Iterator<String> itr=request.getFileNames();
        MultipartFile file=request.getFile(itr.next());
        String fileName=file.getOriginalFilename();
        File dir = new File("C:\\file");
        if (dir.isDirectory())
        {
            File serverFile = new File(dir,fileName);
            BufferedOutputStream stream = new BufferedOutputStream(
                    new FileOutputStream(serverFile));
            stream.write(file.getBytes());
            stream.close();
        }else {
            System.out.println("not");
        }

    }
}

这是我的angularjs 控制器，它发送文件：

$scope.validerOffre= function(){
    var file = $scope.fileUpload;
    var uploadUrl = "/imageUpload";
    fileUploadService.uploadFileToUrl(file, uploadUrl);
    };

这个控制器然后调用 fileUploadService ：

capValueRecruitApp.service('fileUploadService', function ($http) {
  this.uploadFileToUrl = function(file, uploadUrl){
    var fd = new FormData();
    fd.append('file', file);
    $http.post('http://localhost:8080' + uploadUrl, fd, {
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
      })
      .success(function(){
      })
      .error(function(){
      });
  }
});

在我的 angularjs 应用程序中，我想显示我上传的文件，但我不能这样做，因为这些文件是在另一个服务器的 spring boot 应用程序服务器中上传的。

所以我的问题是如何将我上传的文件保存在 angularjs 应用程序服务器的文件夹中，而不是部署 Spring Boot 应用程序的服务器中。

【问题讨论】：

标签： angularjs spring-boot

【解决方案1】：

你基本上有两种解决方案：

1：您创建一个新的@RequestMapping，它采用文件名（或者更好的是文件上传控制器返回的id）并返回文件。像这样：

@RequestMapping(value="/imageDownload", method = RequestMethod.POST)
public void downloadFile(@RequestParam(value = "fileName", required = true) String fileName,HttpServletResponse response) throws IOException {

    File dir = new File("C:\\file");
    File fileToDownload = new File(dir,fileName);
    if (dir.isDirectory() && fileToDownload.exists()){
        //read fileToDownload and send stream to to response.getOutputStream();

    }else {
        System.out.println("no such file "+ fileToDownload.toString());
        response.sendError(404);
        return;
    }

}

那你打电话给http://localhost:8080/imageDownload?filename=yourUploadedFile.jpg

2：当您在上传文件中保存文件时，请将其保存在您的网络服务器可以直接访问的位置。

如果我们的 angularjs 文件由您的 spring 应用程序提供，您可以在 application.properties 文件的spring.resources.staticLocations 中添加一个新文件夹。（见此：http://docs.spring.io/spring-boot/docs/current/reference/html/boot-features-developing-web-applications.html#boot-features-spring-mvc-static-content）

【讨论】：