vue - 实现文件的上传-文档流下载详细过程

前言

• 这个需求一般是在有合同的地方用，首先不止一个地方用我们应该把他封装成一个简易的全局组件，

• 上传的时候封装成全局组件，传2个值，一个合同id，一个开关，下载的时候调用接口获取文档流下载

• 注意看下面的文件上传下载-细节有详细的过程和遇到的问题和解决方案

效果图

接口配置

import request from '@/utils/request'
​
// 上传合同附件
export function uploadPDF (data) {
  return request({
    url: '/contractMsg/updatePDF',
    method: 'put',
    headers: { 'Content-Type': 'multipart/form-data' },
    data
  })
}
​
// 下载合同附件
export function download (id) {
  return request({
    url: `/contractMsg/getPDF/${id}`,
    method: 'get',
    //参数序列化
    paramsSerializer: params => {
      return qs.stringify(params)
    },
    将二进制流转换成blob对象
    reponseType: 'blob',
    // 可加可不加
    headers: {
      'Content-Type': 'application/json;charset=UTF-8;'
    }
  })
}

文件上传下载-细节

文件上传时

1.全局注册组件-主页文章有

2.单向数据流的问题，要把开关值通知父组件关闭使用.sync语法糖，不然会报错。

3.跟Excel文件上传是一样道理，传递formdata类型给后端，记得在api二次封装时候设置formdata类型

4.最好在formdata传2个值，一个上传文件，一个文件id。方便下载。记得回显数据到父组件输入框

5.formdatad对象直接打印是空的，要这样打印 console.log("formdata", formdata.get("file"));

文件下载时

在网上看来很多文章一头雾水，自己试一下，在 这里记录一下。

首先第一点这个文件下载主要是后端写，我们只要传入id即可。但是我们要排查问题。

如果后端把这个接口写好了，在测试工具测试可以直接下载，并且返回结果返回文档流。那剩下就是前端问题。

代码是不能直接下载我们需要blob对象转一下，通过a标签来下载。

网上很多文章是说使用windows.URL就可以实现下载，但是会报undefined，查阅资料好像是说api废弃了，我们可以使用webkitURL是一样效果

还有就是如果我们有全局响应拦截的话，可能会过不去。因为后端可能没有放回状态码，只有文档流。那我们就要在request 响应拦截加上res ！= ' '(我们是判断code通过)

全局上传组件-全局components下

我的命名UploadAnnex/index.vue

​

​

使用组件-父组件

父组件数据

// 上传组件开关
      dialogannex: false,
      // 合同id
      uploadid: 2,
      updata: "",

父组件回显文件名称和使用结构

              
              下载
              上载
            

父组件事件

import { download } from "@/api/client/administrator";
 
 // 上传组件按钮
    addupload() {
      this.dialogannex = true;
    },
    // 下载文件
    async download() {
      await download(this.uploadid)
        .then((res) => {
          console.log("res", res);
          let blob = new Blob([res.data], {
            type: "application/octet-stream;",
          });
          console.log("blob", blob);
          let filename = "css.doc";
          if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, filename);
          } else {
            var link = document.createElement("a");
            link.href = webkitURL.createObjectURL(blob);
            link.download = filename;
            link.click();
            webkitURL.revokeObjectURL(link.href);
          }
        })
        .catch((err) => {
          console.log("错误信息", err);
        });
    },

---

总结：

经过这一趟流程下来相信你也对 vue - 实现文件的上传-文档流下载详细过程 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕