shuili-vue/src/components/myUpload/index.vue

<template>
  <el-upload
    ref="upload"
    class="upload-demo"
    :action="uploadUrl"
    :headers="headers"
    :before-upload="(file) => $fileBeforeUpload(file, 'fileList')"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    multiple
    :on-exceed="handleExceed"
    :on-success="submitUpload"
    :file-list="fileList"
    :disabled="disabled"
  >
    <el-button size="small" type="primary" plain :disabled="disabled"  @click="ButtonClick()" @click.stop="beforeUploadFile">
      <i class="el-icon-upload el-icon--right"></i>
      点击上传
    </el-button>
    <div slot="tip" class="el-upload__tip">
      支持jpg/png/pdf/word/excel文件等，不超过200M
    </div>
  </el-upload>
</template>
<script>
import { getToken } from "@/utils/auth";
import { getFileStream } from "@/api/system/upload";
import Vue from "vue";
export default {
  props: {
    fileList: {
      type: Array,
      default() {
        return [];
      },
    },
    disabled:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload",
      headers: {
        shuili: "water " + getToken(),
      },
      // fileList:[]
    };
  },
  methods: {
    ButtonClick() {

      this.$confirm('<div style="white-space: pre-wrap;">严禁在本系统处理、传输国家秘密、工作秘密及敏感文件数据资料</div>', '注意', {
        title: ' 注意',
        titleAlign: 'left',
        confirmButtonText: '我已知晓',
        cancelButtonText: '取消上传',
        type: 'warning',
        dangerouslyUseHTMLString: true,
        callback: action => {
          if (action === 'confirm') {
            this.$refs['upload'].$refs['upload-inner'].handleClick()
          } else {
            this.$message({
              type: 'warning',
              message: '已取消'
            });
          }
        }
      });
    },
    // 上传意见附件
    submitUpload(_, file) {
      console.log(file);
      this.fileList.push({
        name: file.name,
        fileName: file.response.fileName,
        url: file.response.url,
        uid: file.uid,
      });
      console.log("myUpload", this.fileList);
    },
    handleRemove(file) {
      // console.log(file, fileList1);
      let index = this.fileList.findIndex((item) => item.uid === file.uid);
      // 删除文件
      this.fileList.splice(index, 1);
    },

    // 点击预览的文件进行下载
    handlePreview(file) {
      console.log(file);
      getFileStream({ fileName: file.fileName }).then((res) => {
        const blob = new Blob([res], {
          // type类型后端返回来的数据中会有，根据自己实际进行修改
          // 表格下载为 application/xlsx，压缩包为 application/zip等，
          type: "application/xlsx",
        }); //excel,pdf等
        const href = URL.createObjectURL(blob); //创建新的URL表示指定的blob对象
        const a = document.createElement("a"); //创建a标签
        a.style.display = "none";
        a.href = href; // 指定下载链接
        a.download = file.name; //指定下载文件名
        a.click(); //触发下载
        URL.revokeObjectURL(a.href); //释放URL对象
      });
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
  },
};
</script>