Angular HTML / TS中的最大大小和文件格式验证

Question

我正在用angular在ASP.net网页上上传文件，想问一下如何检查上传的文件是pdf还是jpg，最大2MB。如果不是这样，应该有一个简单的文本显示，文件不应该被上传/在文件列表中列出。我可以在前端/Ts中做到这一点吗?

Answer 1

您可以利用File API。假设您正在使用类型为file的<input>，您可以提取files属性

要验证字段，执行此逻辑(inputRef是对input元素的引用，可以通过document.getElementById或您正在使用的框架提供的任何函数来检索)

if (!inputRef.files || inputRef.files.length === 0) {
console.error("No files uploaded");
} else {
const file = inputRef.files[0];
if (['application/pdf', 'image/jpeg'].includes(file.type)) {
console.error('File should be a pdf or a jpeg');
} else if (file.size > 2e+6) {
console.error('File is too large. Over 2MB');
} else {
console.log('File is valid');
}
}

请注意，size是可信的，type是由扩展派生的，因此，如果用户重命名一个文件，这个检查仍然可以避免。

关于前端验证的警告

使用前端验证只为了提高可用性，而不是为了安全性和完整性。您应该检查文件大小和内容在后端。因为文件扩展名(和派生的MIME类型)永远不可信，所以文件可以重命名。

作为一般的经验法则，如果文件不被服务器系统使用(而只是存储)，并且从未呈现给除上传程序本身以外的其他用户，则可以避免验证文件内容。否则，内容可能会损坏(甚至更糟)，并可能降低系统的可用性。

可能重复