vue axios 实现文件流下载（前后端分离跨域问题的解决）

最新推荐文章于 2024-08-09 14:25:55 发布

明月几时还

最新推荐文章于 2024-08-09 14:25:55 发布

阅读量5.5k

点赞数 1

分类专栏： project 文章标签：文件下载跨域 vue 下载

本文链接：https://blog.csdn.net/weixin_43249074/article/details/102589158

版权

本文详细介绍了在Vue项目中使用axios如何实现文件流下载，包括单个文件和批量文件（考虑了目录层级）的下载。同时，针对前后端分离下可能出现的跨域问题，提出了有效的解决方案，特别指出批量下载时，若文件名相同且无目录层级，可能会导致的异常情况。

摘要由CSDN通过智能技术生成

前端代码

后端以流的形式返回

单个文件下载

    @RequestMapping(value = "download", method = RequestMethod.POST)
    @ApiOperation(value = "单个文件下载")
    public HttpServletResponse download(@RequestBody FileDto fileDto, HttpServletResponse response) {
        InputStream fis = null;
        OutputStream toClient = null;
        try {
            // path是指欲下载的文件的路径。
            String dirPath = cloud_root + fileDto.getPath();
            // 取得文件名。
            String filename = fileDto.getFileName();
            File file = new File(dirPath + "/" + filename);
            fis = new BufferedInputStream(new FileInputStream(file));
            byte[] buffer = new byte[fis.available()];
            fis.read(buffer);
            fis.close();