限制上傳文件格式.rar、.zip、.pdf、.jpg、.png、.docx
antd 中upload對于限制上傳文件格式的屬性是accept，在開發(fā)的過程中，accept對于.doc、.docx、.pdf、.png、.jpg、.rar，格式的限制是完全沒有問題的。但是測試和我說，當(dāng)選擇文件的自定義格式改為所有文件時，之前限制好的除了.doc、.docx、.pdf、.png、.jpg、.rar之外的文件格式的仍然可以進(jìn)行選擇，后端沒有校驗仍然可以上傳成功。
所以就必須想辦法解決了，剛好beforeUpload是upload上傳文件之前的鉤子，參數(shù)為上傳的文件，若返回 false 則停止上傳。我們在beforeUpload函數(shù)的file參數(shù)中可以獲取上傳文件的文件信息，這個時候我們就可以根據(jù)file里面的參數(shù)來進(jìn)行判斷。
注意：為什么要用file.name的后綴來匹配他的文件類型。因為file的type屬性，表示文件類型，在docx后綴的文件type類型為：
type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
為了支持上傳docx文件，所以，只能用下面的方法來實現(xiàn)，因為對upload進(jìn)行了封裝，所以進(jìn)行了一個轉(zhuǎn)化，這樣傳入accept= ".rar,.zip,.pdf,.jpg,.png,.docx"，方便處理
父組件處理文章來源：http://www.zghlxwxcb.cn/news/detail-413410.html
<Uploader
onChange={handleChange}
onRemove={handleRemove}
accept= ".rar,.zip,.pdf,.jpg,.png,.docx" />
子組件處理文章來源地址http://www.zghlxwxcb.cn/news/detail-413410.html
// ts寫法
const handleBeforeUpload = (file_: any, options_: any) => {
const file = file_;
const options = options_;
// 獲取文件后綴如docs,rar,zip等
const fileType = file?.name.split(".");
const fileDate = fileType.slice(-1);
// 將從父組件拿到的accept類型轉(zhuǎn)為數(shù)組，類似['.docs','.rar','.zip']
const docsArr = accept?.split(",");
if (!docsArr?.includes(`.${fileDate[0]}`)) {
message.error(`僅支持文件格式：${accept}格式附件!`);
return false;
}
if (file.size / 1024 / 1024 > 100) {
message.error("文件大小不能超過100兆");
return false;
}
}
到了這里，關(guān)于antd upload上傳格式.doc、.docx、.pdf、.png、.jpg、.rar和大小100兆限制的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
