<a-upload-dragger>在设置了accept=“.pdf, .doc, .docx“的情况下拖拽不会触发beforeUpload进行文件类型校验的问题
<a-upload-dragger>在设置了accept=".pdf, .doc, .docx"的情况下拖拽不会触发beforeUpload进行文件类型校验的问题
·
<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 格式',
});
}
}
}
更多推荐
所有评论(0)