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
}

 

posted @ 2025-03-24 14:49  罗毅豪  阅读(172)  评论(0)    收藏  举报