关于wangEdit选择文件设置maxNumberOfFiles不生效的问题

看官方文档以及Issue #4263, 设置maxNumberOfFiles:1,还是可以多选,然后发现作者是点击上传,往body插入input type为file的标签,然后就想着自己实现自定义上传
关键代码如下:


function singleFileBrowse({ accept, onPick }) {
  return (insertFn) => {
    const input = document.createElement('input')
    input.type = 'file'
    input.accept = accept
    input.multiple = false

    input.style.display = 'none'
    document.body.appendChild(input)

    input.onchange = async () => {
      const file = input.files?.[0]
      try {
        if (!file) return
        await onPick(file, insertFn)
      } finally {
        input.value = ''
        input.remove()
      }
    }
    input.click()
  }
}

然后使用

this.editorConfig.MENU_CONF.uploadImage.customBrowseAndUpload = singleFileBrowse({
        accept: this.editorConfig.MENU_CONF.uploadImage.allowedFileTypes.join(','),
        onPick: async (file, insertFn) => {
          await this.editorConfig.MENU_CONF.uploadImage.customUpload(file, insertFn)
        }
      })

customUpload是上传文件自定义方法,我的如下:

this.editorConfig.MENU_CONF.uploadImage.customUpload = async (file, insertFn) => {
        if (this.uploading) {
          ElMessage.warning("正在上传中，请稍后再试");
          throw new Error("Uploading...");
        }

        try {
          assertMaxSize(file, imgMax);
          this.startProgress(file.name);

          const uploadFile = await ensurePngIfTiff(file);
          assertMaxSize(uploadFile, imgMax);

          const { commonHeaders, commonMeta } = this.getCommonHeadersMeta();
          const url = await uploadToServerWithProgress({
            uploadUrl: fileImgServer.uploadImgUrlFn(),
            headers: commonHeaders,
            meta: commonMeta,
            file: uploadFile,
            onProgress: (p) => (this.uploadPercent = p),
            onXhr: (xhr) => (this._activeXhr = xhr),
          });

          insertFn(url, file.name, url);
          ElMessage.success(`${file.name} 上传成功!`);
          this.finishProgressSuccess();
        } catch (e) {
          ElMessage.error(e.message || `${file?.name || ""} 上传失败!`);
          this.finishProgressFail();
          throw e;
        }
      };

项目使用的是Vue, 然后上传方法uploadToServerWithProgress使用的是xhr,需要展示进度条, 不想动axios通用的封装请求,
以上就是maxNumberOfFiles不生效的替代方法