springBoot+vue实现文件下载功能

springBoot+vue实现文件,图片浏览器下载功能

前端请求

export function down(id){
    return request({
        url:'/file/upload/down/'+id,
        method:'get',
        **responseType:'blob'**
    })
}

前端请求方法

引入请求的方法
        down(“文件ID”).then(response => {
            let blob = new Blob([response], {
              type: "application/vnd.ms-excel;charset=utf-8"
            });
            let fileName = "图片" + Date.parse(new Date()) + ".png";
            if (window.navigator.msSaveOrOpenBlob) {
              navigator.msSaveBlob(blob, fileName);
            } else {
              var link = document.createElement("a");
              link.href = window.URL.createObjectURL(blob);
              link.download = fileName;
              link.click();
              //释放内存
              window.URL.revokeObjectURL(link.href);
            }
          })
          .catch(error => {
            console.log(error);
          });

后端处理方法

@GetMapping(value = "/down/{fileId}")
    public void downloadImage(HttpServletRequest request,HttpServletResponse response,@PathVariable String fileId) throws Exception{
    	//通过文件Id进行文件的查询
        BsFileUpload fileUpload = bsFileUploadService.selectFileById(fileId);
        logger.debug("the imageName is : "+fileUpload.getFileUrl());
        String fileUrl = fileUpload.getFileUrl();
        if(fileUrl != null){
            response.setCharacterEncoding("utf-8");
            response.setContentType("application/octet-stream");
            response.setHeader("Content-Disposition","attachment;fileName=" + FileUtils.setFileDownloadHeader(request, fileUpload.getFileName()));
            //将文件转换成二进制文件
            **FileUtils.writeBytes(fileUrl,response.getOutputStream());**
        }
    }

writeBytes工具类

public static void writeBytes(String filePath, OutputStream os) throws IOException
    {
        FileInputStream fis = null;
        try
        {
            File file = new File(filePath);
            if (!file.exists())
            {
                throw new FileNotFoundException(filePath);
            }
            fis = new FileInputStream(file);
            byte[] b = new byte[1024];
            int length;
            while ((length = fis.read(b)) > 0)
            {
                os.write(b, 0, length);
            }
        }
        catch (IOException e)
        {
            throw e;
        }
        finally
        {
            if (os != null)
            {
                try
                {
                    os.close();
                }
                catch (IOException e1)
                {
                    e1.printStackTrace();
                }
            }
            if (fis != null)
            {
                try
                {
                    fis.close();
                }
                catch (IOException e1)
                {
                    e1.printStackTrace();
                }
            }
        }
    }
已标记关键词 清除标记
<p> <span style="font-size:24px;"><img src="https://img-bss.csdn.net/202002111502403886.png" alt="" /><br /> </span> </p> <p> <span style="font-size:24px;"><img src="https://img-bss.csdn.net/202002111502521739.jpg" alt="" /><br /> </span> </p> <p> <span style="font-size:24px;">本课程是Vue的快速入门课程,涉及到的课程知识点:Vue环境的快速搭建, 会使用Vue的生命周期的钩子函数; 会使用vue常见指令;会使用vue计算属性和watch监控;会编写Vue组件;掌握组件间通信,会创建Vue实例,知道Vue的常见属性</span> </p> <br /> <br /> <span style="font-size:24px;">大家都知道涛哥最关心的是找工作,这段时间出去面试的时候会经常会被问及到Vue相关的知识,所以涛哥迫不及待的赶紧出了一版Vue相关的教程,有人问:我们做后台会前台干什么呀?是因为现在的公司老板都想招复合型的人才,招一个Java开发回来恨不得前后台都会,所以我们Java开发人员也要掌握一些前端相关的技能。Java这边现在前端用的比较多的就是VUE,所以大家还是要赶紧学习起来,为了你不被淘汰,为了你能快速适应公司的发展速度,快速找到一份满意的工作,赶紧学起来吧。本课程是Vue的快速入门课程,涉及到的课程知识点:Vue环境的快速搭建,?会使用Vue的生命周期的钩子函数;?会使用vue常见指令;会使用vue计算属性和watch监控;会编写Vue组件;掌握组件间通信;</span><br /> <br /> <span style="font-size:24px;">用2小时看完,就可以快速上手公司里的项目,后期还会有实战项目上线,请大家持续关注。</span><br /> <br /> <span style="font-size:24px;"></span>
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页