VUE file upload, download as file stream, preview PDF as file stream

<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="File Name"></el-table-column>
      <el-table-column label="Operation" 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-buttontype="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: "Upload successful".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: "Upload files can only be XLS, XLSX, PDF, DOCx, DOC, JPG!".type: "warning"
        });
        return false;
      }
      if (size > 20 * 1024 * 1024) {
        this.$message.error("Please select files less than 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); }, // File download 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; The download attribute defines the address of the download link instead of the jump path link.setattribute ("download", fileName);
          document.body.appendChild(link);
          link.click();
        });
      this.$message({
        message: "Download successful".type: "success"}); }, // preview 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>Copy the code