vue - 点击按钮上传文件功能的实现-526互联

  methods: {
    //点击调用上传方法
    async handleUpload(row) {
      try {
        let fileList = await this.getFile("", true); // 参数1：选取文件类型如.pdf、.png、.doc文件，参数2、是否多选
        console.log(fileList);   // 上传文件可在此处进行
      } catch (error) {
        console.log(error);
      }
    },
    /**
     * 获取文件
     * @param {string} [accept] 'image/png' 文件格式
     * @param {T} [multiple=false]  是否可以上传多个
     * @returns {Promise<T extends boolean ? File[] : File>}
    */
    getFile(accept, multiple) {
      return new Promise(function (resolve, reject) {
        const input = document.createElement("input");
        accept = accept ? accept.trim() : "";
        input.type = "file";
        input.multiple = multiple;
        let count = 0;
        function hasSelectedFile() {
          if (input.value !== "") {
            resolve(multiple ? Array.from(input.files) : input.files[0]);
          } else if (++count >= 40) {
            reject("pick cancel");
          } else {
            setTimeout(hasSelectedFile, 50);
          }
        }
        function focus() {
          window.removeEventListener("focus", focus);
          hasSelectedFile();
        }
        window.addEventListener("focus", focus);
        input.onchange = focus;
        input.accept = accept;
        input.click();
      });
    },
  },