VUE文件上传，以文件流的形式下载，以文件流预览PDF

<template>
  <div class="tipa">
    <el-upload
      class="upload-demo"
      ref="upload"
      action="/api/blade-flow/attach/upload"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :http-request="uploadFile"
      :show-file-list="false"
      :multiple="true"
      :before-upload="beforeUpload"
    >
      <el-button slot="trigger" size="small" type="primary">上传文件</el-button>
    </el-upload>
    <el-table :data="alertTexta" style="width: 100%" height="250">
      <el-table-column prop="fileName" label="文件名称"></el-table-column>
      <el-table-column label="操作" fixed="right" width="300">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="downFile2(scope.row)">下载</el-button>
          <el-button size="mini" type="danger" @click="deleteAttach(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="info" @click="closeTipa" style="float:right;margin-top: 5px;">关闭</el-button>
  </div>
</template>

<script>
import { downFile, uploadFile, getFile } from "@/api/Release/uploadAndDown";
export default {
  name: "tipa",
  components: {},
  data() {
    return {
      timer1: 0,
      elId: "",
      file: {}, //文件数据
      checkAll: false,
      alertTexta: []
    };
  },

  props: ["alertTexta", "tableNamea", "flag"], //接收传的值
  methods: {
    successFile() {
      this.$message({
        message: "上传成功",
        type: "success"
      });
      let params_list = {
        fileInfoId: this.tableNamea
      };
      getFile(params_list).then(res => {
        this.alertTexta = res.data.data.records;
      });
      clearInterval(this.timer1);
    },
    closeTipa() {
      this.alertTexta = [];
      this.$emit("closeTipa"); //分发事件
    },
    //文件上传
    uploadFile(param) {
      this.file = param.file;
      let size = Math.floor(this.file.size);
      var testmsg = this.file.name.substring(
        this.file.name.lastIndexOf(".") + 1
      );
      const extension = testmsg === "xls";
      const extension2 = testmsg === "xlsx";
      const extension3 = testmsg === "pdf";
      const extension4 = testmsg === "docx";
      const extension5 = testmsg === "doc";
      const extension6 = testmsg === "jpg";
      if (
        !extension &&
        !extension2 &&
        !extension3 &&
        !extension4 &&
        !extension5 &&
        !extension6
      ) {
        this.$message({
          message: "上传文件只能是 xls、xlsx、pdf、docx、doc、jpg格式!",
          type: "warning"
        });
        return false;
      }
      if (size > 20 * 1024 * 1024) {
        this.$message.error("请选择20M以内的文件！");
        return false;
      }
      let formData = new FormData();
      formData = null;
      formData = new FormData();
      formData.append("file", this.file);
      formData.append("fileInfoId", this.tableNamea);
      formData.append("flag", this.flag);
      this.$http({
        method: "post",
        url: "/api/blade-flight/attach/upload",
        data: formData,
        headers: {
          "Content-Type": "multipart/form-data"
        }
      })
        .then(function(res) {})
        .catch(function(err) {
          console.log("err:", err);
          return false;
        });
      this.timer1 = setInterval(this.successFile, 2000);
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    handlePreview(file) {
      // console.log(file);
    },
    //文件下载
    downFile2(row) {
      let formData = new FormData();
      formData.append("id", row.id);
      this.$http
        .post("/api/blade-flight/attach/download", formData, {
          responseType: "blob"
        })
        .then(res => {
          let fileName = row.fileName;
          let blob = new Blob([res.data]);
          let url = window.URL.createObjectURL(blob);
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          // 获取文件名
          // download 属性定义了下载链接的地址而不是跳转路径
          link.setAttribute("download", fileName);
          document.body.appendChild(link);
          link.click();
        });
      this.$message({
        message: "下载成功",
        type: "success"
      });
    },
    //预览pdf
    preview(row) {
      let formData = new FormData();
      formData.append("id", row.fileId);
      this.$http
        .post("/api/blade-flight/attach/download", formData, {
          responseType: "blob"
        })
        .then(res => {
          const binaryData = [];
          binaryData.push(res.data);
          this.pdfUrl = window.URL.createObjectURL(
            new Blob(binaryData, { type: "application/pdf" })
          );
          window.open(this.pdfUrl);
        });
    },
  }
};
</script>