<a-upload-dragger
              :multiple="true"
              accept=".pdf, .doc, .docx"
              :show-upload-list="false"
              name="file"
              :before-upload="beforeUpload"
              :custom-request="customUploadRequest"
            >
              <div
                class="upload-area"
                @dragenter="handleDragEnter"
                @dragover="handleDragOver"
                @dragleave="handleDragLeave"
                @drop="handleDrop"
              >
                <upload-one theme="filled" size="60" fill="#a8abb2" :strokeWidth="3"/>
                <div class="text">将文件(Pdf、Doc、Docx)拖到此处,或
                  <span style="color: #005ff9">点击上传</span>
                </div>
              </div>
            </a-upload-dragger>

解决办法:

自己手动增加拖拽事件的检测。

主要的情况是:组件自己能完成符合accept文件的上传功能不管是点击选择文件还是拖拽。主要的问题是在拖拽的时候没有文件类型不符合的提示。

可以增加文件放入事件,然后在这里对文件进行校验,符合的就不进行任何提示,不符合的进行提示。

说白了只需要增加这个@drop="handleDrop"事件就行。

function handleDrop(e) {
  // console.log('文件已放下', e);
  e.preventDefault(); // 阻止默认行为
  // 获取拖拽的文件
  const { files } = e.dataTransfer;
  // console.log('拖拽的文件列表', files);

  // 手动触发上传逻辑
  if (files.length > 0) {
    const file = files[0];
    const isDocOrPdfOrDocx = file.type === 'application/msword'
      || file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
      || file.type === 'application/pdf';
    if (!isDocOrPdfOrDocx) {
      openNotificationWithIcon({
        type: 'error',
        desc: '请确认上传文件是否为 pdf/doc/docx 格式',
      });
    }
  }
}

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐