Antd之限制文件上传的类型
1.给<a-upload>增加accept属性,accept属性为这些文件的MIME类型。
<a-tooltip> <template #title>只允许上传doc(x),xls(x),txt,pdf</template> <a-upload v-model:file-list="fileList" :before-upload="(file) => beforeUpload(file)" :showUploadList="false" accept="application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/plain,application/pdf" :disabled="uploadLoading" > <span> <loading-outlined v-if="uploadLoading" ></loading-outlined> <CloudUploadOutlined v-else class="icon" />文件上传 </span> </a-upload> </a-tooltip>
2.上传时增加校验
const allowFileMIMEType = [ "application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document", "application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "text/plain", "application/pdf", ]; const beforeUpload = (file) => { const isAllowFileType = allowFileMIMEType.includes(file.type); if (!isAllowFileType) { message.error("只允许上传doc(x),xls(x),txt,pdf"); return false; } // upload file }

浙公网安备 33010602011771号