vue+element上传文件和下载文件

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、上传

1.template内容

代码如下（示例）：

<template>
  <el-upload ref="upload" action="#" :multiple="false" :file-list="fileList"
    :before-upload="beforeUpload" :http-request="uploadHttpRequest" :on-remove="fileRemove" :on-change="fileChange">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">不超过10M</div>
  </el-upload>
</template>

2.转二进制

代码如下（示例）：

<script>
export default {
  data() {
    return {
      // 上传表格
      fileList: [],
      file: {}, // 上传大概内容
      fileBase64:null
    };
  },
  methods: {
    beforeUpload(file) {
      //文件类型
      console.log(file);
    // 判断文件类型
    //   const isType = file.type === "application/vnd.ms-excel";
    //   const isTypeComputer =
    //     file.type ===
    //     "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
    //   const fileType =  isTypeComputer;
    //   if (!fileType) {
    //     this.$message.error("上传文件只能是xls/xlsx格式！");
    //   }

      // 文件大小限制为10M
      const fileLimit = file.size / 1024 / 1024 < 10;
      if (!fileLimit) {
        this.$message.error("上传文件大小不超过10M！");
      }
      // 拿到最终转义后得内容
      this.getBase64(file).then((resBase64) => {
        this.fileBase64 = resBase64.split(",")[1]; //直接拿到base64信息，按照后端需求传过去就可以
      });
     
      return fileLimit;
      this.uploadHttpRequest();
    },
    // 自定义上传方法，param是默认参数，可以取得file文件信息，具体信息如下图
    uploadHttpRequest(param) {
      // console.log("888", param);
      let formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加
      formData.append("file", param.file); //添加文件对象
      // 将二进制流和文件得基础信息放在一个对象里
      this.file = param.file;
      
    },
    // 文件发生改变
    fileChange(file, fileList) {
      if (fileList.length > 0) {
        this.fileList = [fileList[fileList.length - 1]]; // 展示最后一次选择的文件
      }
    },
    // 移除选择的文件
    fileRemove(file, fileList) {
      this.$refs.upload.clearFiles(); //清除上传文件对象
      this.fileList = []; //清空选择的文件列表
      this.file = {};
      if (fileList.length < 1) {
        this.uploadDisabled = true; //未选择文件则禁用上传按钮
      }
    },
    // 取消
    closeDialog() {
      this.$refs.upload.clearFiles(); //清除上传文件对象
      this.fileList = []; //清空选择的文件列表
      this.file = {};
      this.$emit("close", false);
    },
    //这个file参数 也就是文件信息，你使用 插件 时 你就可以打印出文件信息 看看嘛
    getBase64(file) {
      return new Promise((resolve, reject) => {
        let reader = new FileReader();
        let fileResult = "";
        reader.readAsDataURL(file); //开始转
        reader.onload = function () {
          fileResult = reader.result;
        }; //转 失败
        reader.onerror = function (error) {
          reject(error);
        }; //转 结束  咱就 resolve 出去
        reader.onloadend = function () {
          resolve(fileResult);
        };
      });
    },
  },
};
</script>

3.下载

代码如下（示例）：

// 原理是利用a标签下载内容
var link = document.createElement("a");
      link.setAttribute(
                  "href",
                  "路径" +
                    res.data.data
                );
                link.click();