项目使用的是1.x版本，根据antdv官方文档的例子，使用beforeUpload限制文件上传类型。
beforeUpload(file) {
let arr = file.name.split(".");
let str = arr[arr.length - 1].toLowerCase();
if (
!(
str == "png" ||
str == "jpg" ||
str == "jpeg" ||
str == "pdf"
)
) {
this.$message.error(
"请上传以下格式的文件:jpg(jpeg)、png、pdf"
);
return false;
}
return true;
}
❌ok，好家伙，错误是提示了，但是文件还是显示在了列表里。（原因）
再看一眼官方文档~
beforeUpload的返回值可以是一个 Promise 以支持异步处理，如服务端校验等
好的，那试试上 Promise。
beforeUpload(file) {
return new Promise((resolve, reject) => {
let arr = file.name.split(".");
let str = arr[arr.length - 1].toLowerCase();
if (
!(
str == "png" ||
str == "jpg" ||
str == "jpeg" ||
str == "pdf"
)
) {
this.$message.error(
"请上传以下格式的文件:jpg(jpeg)、png、pdf"
);
return reject(false);
}
return resolve(true);
});
}
⭕提示文件类型不对时，错误文件没有出现在列表里。
很久很久之后发现⚡惊天大雷⚡：:multiple="true"时不要使用promise方法，此时可参考此文章。
后记（💔可以不看）
A fews days later~~~
没有任务，无聊之际，不知道怎么来到了MDN的<input type="file">页面，发现可以用accept属性指定可接受的文件类型。
accept="image/png"或accept=".png"——接受 PNG 文件。accept="image/png, image/jpeg"或accept=".png, .jpg, .jpeg"——接受 PNG 或 JPEG 文件。accept="image/*"——接受任何带有image/*MIME 类型的文件。（许多移动设备也允许用户在使用它时用摄像头拍照。）accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"——接受类似于 MS Word 文档的任何文件。
嗯，难道可以用一个属性搞定的需求我却吭哧吭哧写了个方法。
再去看看antd官方文档，API确实有accept这个参数。
好的，马上找出代码，在a-upload标签内加上accept=".pdf,.png,.jpg,.jpeg"。
效果不错，看到弹出的文件选择器只显示了accept值指定的文件类型，在选择阶段筛选出符合要求的文件，用户不会选到错误的文件。
继续往下看MDN，发现高兴的太早了🤨~
accept属性不验证所选文件的类型；它只是为浏览器提供提示来引导用户选择正确的文件类型。用户仍然可以（在大多数情况下）在文件选择器中切换一个选项，使其能够覆盖此选项并选择他们希望的任何文件，然后选择不正确的文件类型。
什么！
能够覆盖此选项并选择他们希望的任何文件，然后选择不正确的文件类型！
能够选择不正确的文件类型！
不正确的文件类型！
不正确！
回去看看，怎么选择不正确的文件类型。
下拉选择“所有文件”，所有文件都可以选！
好吧，beforeUpload这个方法还是没有白写的，加回来~
