前后端分离项目的文件上传下载错误总结

1、No converter for [class org.springblade.core.tool.api.R] with preset Content-Type 'application/octet-stream'

  这部分是用的springblade框架,返回值要求用R对象来写,把原来的数据放在R.data中即可

2、下载的文件内容是undefined

  这可能是因为指定文件错误,可以控制台打印一下数据然后找找真正需要的数据放在那里。

3、如何将文件从后端传到前端下载、如何在前端下载本地文件:

  将文件读取后转换为base64格式,这个base64是二进制格式,之后传输到前端再转换回来,代码如下:

 

后端
Path originalFilePath = Paths.get(yourPath);
String base64String = Base64.getEncoder().encodeToString(Files.readAllBytes(originalFilePath));
return ResponseEntity.ok()
                .headers(headers)
                .contentLength(resource.contentLength())
                .contentType(MediaType.APPLICATION_OCTET_STREAM)
                .body(base64String)
前端
var byteCharacters = atob(data);
        var byteNumbers = new Array(byteCharacters.length);
        for (var i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i);
        }
        var byteArray = new Uint8Array(byteNumbers);
这个byteArray就可以直接用于Blob 对象

前后端分离下载附件部分完整代码如下:

后端:

@PostMapping("/download")
    @ApiOperationSupport(order = 8)
    @ApiOperation(value = "逻辑删除", notes = "传入ids")
    public ResponseEntity downloadFile(@RequestBody FileRequest fileRequest) throws IOException {// 构造文件路径
//        Path originalFilePath = Paths.get(fileRequest.getUrl());
        Path originalFilePath = Paths.get("E:\\download\\000000\\28b1cbc2-e0cc-422e-b7bd-5bf55ece92f6.doc");
        Resource resource = new UrlResource(originalFilePath.toUri());

        // 设置新文件名
        String newFileName = fileRequest.getName();
        String contentDisposition = "attachment; filename=" + newFileName;

        // 设置响应头
        HttpHeaders headers = new HttpHeaders();
        headers.add(HttpHeaders.CONTENT_DISPOSITION, contentDisposition);
        headers.add(HttpHeaders.CONTENT_TYPE, MediaType.APPLICATION_OCTET_STREAM_VALUE);
        /*byte[] fileData = Files.readAllBytes(originalFilePath);
        String base64String = Base64.getEncoder().encodeToString(fileData);*/
        String base64String = Base64.getEncoder().encodeToString(Files.readAllBytes(originalFilePath));
        // 返回响应Entity
        return ResponseEntity.ok()
                .headers(headers)
                .contentLength(resource.contentLength())
                .contentType(MediaType.APPLICATION_OCTET_STREAM)
                .body(base64String);
    }

前端:

clickFileMethod(value,key,viewForm){
       
        download(value,viewForm.fileUrl[key]).then(res=>{
          this.downloadFile(res.data.data.body, value);
        }).catch(error => {
          console.error('Error downloading file:', error);
        });
      },
      downloadFile(data, fileName) {
        // 将 Base64 转换为 Blob
        var byteCharacters = atob(data);
        var byteNumbers = new Array(byteCharacters.length);
        for (var i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i);
        }
        var byteArray = new Uint8Array(byteNumbers);

        // 创建一个 Blob 对象
        var blob = new Blob([byteArray], { type: 'application/octet-stream' });

        // 创建一个 Object URL,该 URL 代表给定的 Blob 对象或者 File 对象
        const url = URL.createObjectURL(blob);

        // 创建一个虚拟的下载链接并点击它
        const a = document.createElement('a');
        a.href = url;
        a.download = fileName || 'downloaded_file';
        document.body.appendChild(a);
        a.click();

        // 释放资源
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);
      },

js:

export const download = (name,url) => {
  return request({
    url: 'download',
    method: 'post',
    data: {
      name:name,
      url:url
    }
  })
}

 如果觉得文章对你有帮助,请点个赞吧~~

posted @ 2023-12-20 11:21  Link_Soul  阅读(922)  评论(0)    收藏  举报