this.$refs["upload"].$refs["upload-inner"].handleClick();

<template>
  <div>
    <el-button
      type="text"
      @click="test"
      style="font-size: 12px"
      icon="el-icon-upload2"
    >
      上传压缩包
    </el-button>
    <el-upload
      ref="upload"
      :multiple="false"
      class="upload-container"
      :file-list.sync="fileList"
      :http-request="Upload"
      :on-change="handleChange"
      :before-upload="beforeAvatarUpload"
      :on-preview="handlePreview"
      :before-remove="beforeRemove"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :on-exceed="handleExceed"
      :on-progress="handleProgress"
      :limit="1"
      action
      :show-file-list="false"
      accept=".zip"
    >
    </el-upload>
  </div>
</template>

<script>
import axios from "axios";
import request from "@/utils/request";

export default {
  components: {},
  data() {
    return {
      fileList: [],
    };
  },
  props: {
    appSubViewId: {
      type: String,
      default: () => "",
    },
    companyId: {
      type: String,
      default: () => "",
    },
    documentId: {
      type: String,
      default: () => "",
    },
    fieldName: {
      type: String,
      default: () => "",
    },
  },
  computed: {},
  created() {
    console.log(this.fieldName, "获取到什么------");
  },
  methods: {
    test() {
      if (this.fieldName === "NONE_DISPLAY_FILE") {
        this.$confirm(
          "该视图未显示附件字段，本次上传将不上传文件，是否继续？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          },
        )
          .then(() => {
            this.$refs["upload"].$refs["upload-inner"].handleClick();
          })
          .catch(() => {});
      } else {
        this.$refs["upload"].$refs["upload-inner"].handleClick();
      }
    },

    getFileList() {
      return this.fileList;
    },
    handleChange(file, fileList) {
      this.fileList = fileList;
      console.log(this.fileList);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`每次只能上传1个文件`);
    },
    handlePreview(file) {
      let rootSrc = "";
      let filePreview = rootSrc + file.response.url;
      window.open(filePreview, "_blank");
    },
    // 删除文件之前的钩子
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      file.raw && file.raw.source && file.raw.source.cancel("中止上传！");
      this.fileList = fileList;
    },
    // 文件上传成功时的钩子
    handleSuccess(response, file, fileList) {
      this.$refs.upload.clearFiles();
    },
    handleProgress(event, file, fileList) {},
    //文件上传前的校验
    beforeAvatarUpload(file) {
      if (this.fieldName === "NONE_DISPLAY_FILE") {
        this.$alert(
          "该视图未显示附件字段，本次上传将不上传文件，是否继续？",
          "提示",
          {
            confirmButtonText: "确定",
            callback: (action) => {},
          },
        );
      }
      return false;
    },
    //todo 未来需要添加删除附件的功能
    Upload(params) {
      let CancelToken = axios.CancelToken;
      let source = CancelToken.source();
      let form = new FormData();
      form.append("attachmentFile", params.file);
      form.append("title", params.file.name);
      if (this.appSubViewId) {
        form.append("appSubViewId", this.appSubViewId);
      }
      if (this.companyId) {
        form.append("companyId", this.companyId);
      }
      if (this.templateId) {
        form.append("documentId", this.documentId);
      }
      request({
        url: "/app/subView/attachmentAddByZip",
        method: "post",
        headers: {
          "Content-Type": "multipart/form-data",
        },
        cancelToken: source.token,
        data: form,
        onUploadProgress: (progressEvent) => {
          params.file.percent =
            ((progressEvent.loaded / progressEvent.total) * 100) | 0;
          params.file.source = source;
          params.onProgress(params.file);
        },
      })
        .then((resp) => {
          params.onSuccess(resp.data);
          this.$emit("uploadSuccess", resp.data, this.templateId);
        })
        .catch((error) => {});
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-button {
    font-size: 12px;
  }
}
.upload-container {
  display: none;
}
</style>