elementUI组件Upload + VUE 实现文件下载功能

1. 实现如下功能

2. 首先我们先看点击下载按钮触发的方法

//点击下载按钮获取当前行数据内容，跳转后端实现业务处理
            fileDownload(row) {
                download({
                    fileName: row.fileName,
                    fileUrl: row.fileUrl,
                    fileHash: row.fileHash
                })
            },

3. 后端service层入参需加一个HttpServletResponse对象

  public Result download(HttpServletResponse response, TestFile testFile) {
  //获取文件hash一样的文件（hash相同代表是同一个文件）
     List<TestFile > testFileHS = testFileMapper.selectList(new QueryWrapper<TestFile>()
                .eq("file_hash",testFile.getFileHash())
        // 获取testFileHS中的第一个对象并塞进file中
        File file = new File(testFileHS .get(0).getFileUrl());
        if (!file.exists()) {
            return ResultUtil.error(ResultCode.FAIL.getCode(), "当前附件本地文件不存在！");
        }
        //设置请求头
        response.setHeader("Content-Disposition", "attachment;filename=a.jpg");
        //设置类型
        response.setContentType("application/x-msdownload");
        //设置编码
        response.setCharacterEncoding("utf-8");
        FileInputStream bis;
        OutputStream os;
        try {
            //将file对象塞进一个输入流中
            bis = new FileInputStream(file);
            //创建一个byte对象
            byte[] buff = new byte[1024];
           //获取输出流
            os = response.getOutputStream();
            int i = 0;
            //当file对象的输入流没有结束的时候，通过输出流写出
            while ((i = bis.read(buff)) != -1) {
                os.write(buff, 0, i);
            }
            bis.close();
            os.close();
            return ResultUtil.success();
        } catch (IOException e) {
            return ResultUtil.error(ResultCode.FAIL.getCode(), "下载失败！");
        }
    }

4.后端结束之后返回前端处理文件流

/**
 1. 文件下载
 2. @param params
 */
export function download(params) {
    request({
        url: '/cxk/jntm',
        responseType: 'blob', // 表明返回服务器返回的数据类型
        method: 'post',
        data: params
    }).then(result => {
    //创建一个Blob对象接收后端传来的文件流
        const blob = new Blob([result], {
            type: 'application/octet-stream'
        })
        const downloadElement = document.createElement('a')
        // 创建下载的链接
        const href = window.URL.createObjectURL(blob) 
        downloadElement.href = href
        // 下载后文件名
        downloadElement.download = params.fileName 
        document.body.appendChild(downloadElement)
         // 点击下载
        downloadElement.click()
        // 下载完成移除元素
        document.body.removeChild(downloadElement) 
        // 释放掉blob对象
        window.URL.revokeObjectURL(href) 
    }).catch(err => {
            this.$message.error(err.message)
        })
}

好啦，到这里文件下载就结束了，另外fileHash这个东西是区别文件是否为同一个的，如果不做这个功能此步可以省略，觉得还不错的小伙伴可以点赞+收藏+转发，你的支持将会是我创作的动力，感谢有你！