使用 AJAX 和 Spring 引导在网页中显示文件

Question

我正在 Spring Boot 中构建一个 REST API 用于从服务器上传和获取文件，我想上传各种类型的文件，可以是文本、图像、音频、视频等..

上传没有问题，但是当我想在我的网页上显示文件时，出现了内容，但我从服务器获取数据作为原始数据。

我想将该数据放入 URL.createObjectURL()，然后重定向到生成的 URL。

我正在上传一些屏幕截图。

这是我做console.log(response)时的数据；

我用于 AJAX

的代码

var form = new FormData();
form.append("qualifiedFilePath", "E://files/test.png");

var settings = {
    "async": true,
    "crossDomain": true,
    "url": "http://localhost:8081/callTransaction/file",
    "method": "POST",
    "timeout": 0,
    "processData": false,
    "mimeType": "multipart/form-data",
    "contentType": false,
    "Accept": "image/png",
    "data": form
};

$.ajax(settings).done(function(response) {
    console.log(response);
    const objectURL = URL.createObjectURL(new Blob([response], {
        "type": "image/png"
    }));
    console.log(objectURL);
});

我得到 URL：斑点：http://localhost:8080/81c9fbde-5e84-400e-8d92-5da6fc02c7ef

输出：

Spring 引导中的源代码：

控制器：

@PostMapping(path="/file")
@CrossOrigin(origins = "http://localhost:8080")
public ResponseEntity<Resource> loadFile(@RequestPart("qualifiedFilePath") String qualifiedFilePath, HttpServletRequest request)
{
    return ctbl.loadFile(qualifiedFilePath,request);
}

业务逻辑：

public ResponseEntity<Resource> loadFile(String qualifiedFilePath, HttpServletRequest request)
    {
        Resource file=null;
        if(qualifiedFilePath==null)
        {
            return new ResponseEntity<Resource>(file,HttpStatus.BAD_REQUEST);
        }
        try {
            file=ctdi.loadFile(qualifiedFilePath);
        } catch (MalformedURLException e) {
            return new ResponseEntity<Resource>(file,HttpStatus.INTERNAL_SERVER_ERROR);
        }
        if(file==null)
        {
            return new ResponseEntity<Resource>(file,HttpStatus.NO_CONTENT);
        }
          String contentType = null;
            try {
                contentType = request.getServletContext().getMimeType(file.getFile().getAbsolutePath());
            } catch (IOException ex) {
                return new ResponseEntity<Resource>(file,HttpStatus.INTERNAL_SERVER_ERROR);
            }

            if(contentType == null) {
                contentType = "application/octet-stream";
            }
            return ResponseEntity.ok()
                                .contentType(MediaType.parseMediaType(contentType))
                                .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + file.getFilename() + "\"")
                                .body(file);
    }

DAO:

@Override
public Resource loadFile(String qualifiedFilePath) throws MalformedURLException {
    Path filePath = Paths.get(qualifiedFilePath);
    Resource resource = new UrlResource(filePath.toUri());
    return resource;
}

Answer 1

问题发了这么久才回答，但是解决方法已经找到了。

它有一个非常简单的解决方案。

我使用了 CalliCoder 网站上的程序逻辑[link 附在下面]，通过使用它我能够存储文件、查看文件并下载它们，他们给出了非常好的解释该计划的内容以及如何进行。

通过使用它，我们可以创建一个 URL（端点），通过它我们可以访问我们正在接近的文件，他们也给出了访问文件的示例。

他们制作了一个基于网络的前端，他们试图在其中上传文件，但是 file/downloading 在前端显示文件的模块丢失了。

是的，我们可以在浏览器中复制 URL（端点）并启动 displaying/playing 文件。

如果我们想使用 URL.createObjectURL() 为同一来源制作临时和本地 URL，那么我们可以这样做：

URL.createObjectURL(await fetch("URL(endpoint)").then(r => r.blob()));

此示例取自 Whosebug[link 附在下面]

参考文献：

CalliCoder
Whosebug

使用 AJAX 和 Spring 引导在网页中显示文件

Displaying file in web page using AJAX and Spring Boot

ajax

file-io

spring

spring-boot