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通过),axios会默认加一层data

如下例子

service.interceptors.response.use(
  res => {
    // axios默认加了一层data
    // 这个res包括这个请求响应回来的所有信息
    // 所有的接口请求都会回到这里
    // 获取到本次请求得到的数据
    const data = res.data
    // 会帮所有的请求打印
    // console.log(data);
    // 判断本次请求是否成功
    if (data.code === 200 || data != '') {
      // 如果响应成功，则正常给他返回数据
      return data
    } else {
      // 证明失败，我们需要让外面的catch被调用
      // 要让catch被调用，就要手动抛出一个错误，并把服务器返回的消息抛回去
      // Message.warning(data.message)
      return Promise.reject(data.message)
    }
  },
}

全局上传组件-全局components下

我的命名UploadAnnex/index.vue

<template>
  <el-dialog
    title="合同附件上传"
    :visible.sync="dialogVisible"
    width="40%"
    :before-close="handleClose"
  >
    <el-form ref="form" :model="form" size="small" label-width="80px">
      <el-form-item label="文件名称:">
        <el-input v-model="form.contitle"></el-input>
      </el-form-item>
      <el-form-item label="文件上传:">
        <div class="uppicture">
          <input type="file" class="upinput" ref="file" @change="showimg" />
          <i class="el-icon-plus" id="changes" @click="changeimg"></i>
          <p>上传合同文件附件</p>
          <el-button type="primary" class="uploadbutton" @click="addupload"
            >上传附件{{ id }}</el-button
          >
        </div>
      </el-form-item>
    </el-form>
​
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose" style="background: #f7f7f7" size="small"
        >取 消</el-button
      >
      <!-- <el-button type="primary" @click="upload">确 定</el-button> -->
    </span>
  </el-dialog>
</template>
​
<script>
import { uploadPDF } from "@/api/client/administrator";
export default {
  name: "UploadAnnex",
  data() {
    return {
      form: {
        // 合同名称
        contitle: "",
      },
      formdata: {},
    };
  },
  props: {
    // 显示隐藏
    dialogVisible: {
      type: Boolean,
      //   必传
      required: true,
    },
    // 合同id
    id: {
      type: Number,
      //   必传
      required: true,
    },
  },
  methods: {
    // 关闭之前
    handleClose() {
      console.log("关闭之前");
      // .sync语法糖,单向数据流问题,
      // 父组件传递给子组件的数据,子组件直接修改会报错,需要传递给父组件修改
      this.$emit("update:dialogVisible", false);
    },
    // 输入款获取事件
    showimg() {
      const that = this;
      console.log(that.$refs.file);
      console.log(that.$refs.file.files[0]);
      // 文件名称复制
      that.form.contitle = that.$refs.file.files[0].name;
      // 声明一个formdata对象
      this.formdata = new FormData();
      // 赋值需要传递的文件-添加到formdata对象中
      this.formdata.append("file", that.$refs.file.files[0]);
      // 赋值需要传递文件id
      this.formdata.append("id", this.id);
      // 打印formdata对象
       console.log("formdata", formdata.get("file"));
    },
    // 图标触发输入框事件
    changeimg() {
      // 点击图标时候，触发input选择文件按钮
      this.$refs.file.dispatchEvent(new MouseEvent("click"));
    },
    // 上传附件
    async addupload() {
      // 上传文文件提示,未选择文件提示用户
      if (!this.form.contitle) {
        return this.$message.warning("请先在左侧上传文件");
      }
      const res = await uploadPDF(this.formdata);
      console.log("合同上传", res);
      // 回显文件名称给父组件的form表单
      this.$emit("updata", this.form.contitle);
      //  清空表单
      this.form.contitle = "";
      this.formdata = {};
      // 关闭弹框
      this.handleClose();
    },
  },
};
</script>
​
<style lang="scss" scoped>
::v-deep .el-dialog {
  border-radius: 10px;
  .el-dialog__header {
    border-radius: 9px 9px 0 0;
    background-color: #1488c6;
    padding: 8px 20px;
    .el-dialog__title {
      color: white;
      font-size: 16px;
    }
​
    .el-dialog__headerbtn {
      top: 12px;
      i {
        color: white;
      }
    }
  }
  .el-dialog__footer {
    text-align: center;
  }
  .el-dialog__body {
    padding: 12px;
  }
  .uppicture {
    width: 120px;
    height: 120px;
    border: 1px solid #717376;
    position: relative;
    cursor: pointer;
    input {
      width: 100%;
      height: 100%;
      vertical-align: middle;
      opacity: 0;
    }
    i {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 30px;
      // background-color: skyblue;
    }
    p {
      position: absolute;
      bottom: -2px;
      left: 50%;
      word-break: keep-all;
      transform: translate(-50%);
    }
    .uploadbutton {
      position: absolute;
      bottom: 0;
      margin-left: 20px;
    }
    &:hover {
      color: #2da9fa;
      border: 1px solid #2da9fa;
      p {
        color: #2da9fa;
      }
    }
  }
}
</style>

使用组件-父组件

 <!-- 上传组件使用 -->
    <UploadAnnex
      :dialogVisible.sync="dialogannex"
      :id="uploadid"
      @updata="updata = $event"
    ></UploadAnnex>

父组件数据

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

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

<el-form-item label="合同扫描件:" >
              <el-input
                v-model="updata"
                style="width: 350px; margin-right: 10px"
              ></el-input>
              <el-button @click="download">下载</el-button>
              <el-button @click="addupload">上载</el-button>
            </el-form-item>

父组件事件

link.download 是下载文件的名字，可能会因为编码格式原因中文名字会乱码。所以可以在这条数据文件上传时把名字在数据库存一次，查单条的时候放回来，下载时候重新赋值名字

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/pdf;",
          });
          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 - 实现文件的上传-文档流下载详细过程 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

参考文章：http://blog.ncmem.com/wordpress/2023/10/26/vue-%e5%ae%9e%e7%8e%b0%e6%96%87%e4%bb%b6%e7%9a%84%e4%b8%8a%e4%bc%a0-%e5%ad%97%e8%8a%82%e6%b5%81%e4%b8%8b%e8%bd%bd%e8%af%a6%e7%bb%86%e8%bf%87%e7%a8%8b/
欢迎入群一起讨论