vue+springboot下载文件失败

Question

vue上传文件怎么显示出来，之前做了一个图片的上传下载，现在换成文件了，上传能够实现，但是没法在文本框中显示出来，无法下载。这是我写的下载后端的前端代码

Answer 1

破二兔兔兔 下午好🌅🌅🌅
本答案参考ChatGPT-3.5

根据你提供的代码，问题可能出在以下几个地方：

1. 下载接口的路径定义问题：你的下载接口应该是 "/flagt/{flag}" 而不是 "/flagt"，这样才能接收到路径中的 {flag} 参数。

2. 前端调用下载接口时的参数传递问题：你的下载方法中使用了 down(scope.row.material)，但是没有提供代码中 data 定义的 scope.row.material 的具体实现。请确保传递正确的参数到后端接口。

3. 后端文件路径问题：根据你提供的代码，文件路径应该是 filePath，请确保文件存储的路径是正确的，并且文件已经正常上传到了该路径。

综上所述，解决方案如下：

1. 修改后端代码，将下载接口的路径定义为 /flagt/{flag}。

2. 前端调用下载接口时，检查 down() 方法中传递的参数是否正确。

3. 检查文件存储路径 filePath 是否正确，并确保文件已经成功上传到该路径。

以下是修改后的代码示例：

后端代码：

@GetMapping("/flagt/{flag}")
public void avatarPath(@PathVariable String flag, HttpServletResponse response) {
    if (!FileUtil.isDirectory(filePath)){
        FileUtil.mkdir(filePath);
    }
    try {
        OutputStream os;
        List<String> fileNames = FileUtil.listFileNames(filePath);
        String avatar = fileNames.stream().filter(name -> name.contains(flag)).findAny().orElse("");
        if (StringUtil.isNotEmpty(avatar)) {
            response.addHeader("Content-Disposition", "attachment; filename=" + URLEncoder.encode(avatar, "UTF-8"));
            response.setContentType("application/octet-stream");
            byte[] bytes = FileUtil.readBytes(filePath + avatar);
            os = response.getOutputStream();
            os.write(bytes);
            os.flush();
            os.close();
        }
    } catch (Exception e) {
        System.out.println("文件下载失败");
    }
}

前端代码：

<el-button type="primary" @click="down(scope.row.material)" style="margin-left: 5px">下载</el-button>

再次提醒，确保文件已经成功上传到 filePath 路径，并且传递正确的参数给后端下载接口。