背景
在前端开发中，文件上传功能是常见的需求之一。blueimp/jQuery-File-Upload 是一个流行的开源库，可以轻松实现文件上传功能。该库提供了许多配置选项，其中包括 maxFileSize 和 acceptFileTypes，用于限制上传文件的大小和类型。
然而，在某些情况下，这些选项可能无法按预期工作，导致用户可以上传超过指定大小或类型的文件。本文将探讨这个问题的原因和解决方法。
原因
问题出现的原因是由于 maxFileSize 和 acceptFileTypes 只是 blueimp 库内部的校验规则，并不能防止通过其他方式上传超过大小或不符合类型的文件。具体来说，以下两种情况可能导致这个问题：
- 服务端没有对上传的文件进行校验或者校验规则不完善。
- 用户使用非正常的上传方式绕过了前端校验。
因此，我们需要采取多层次的校验措施来确保上传的文件符合要求。
解决方法
前端校验
虽然前端校验不能完全保证上传的文件符合要求，但它可以有效地防止错误操作和恶意行为。下面是一个示例的前端校验代码：
-- -------------------- ---- -------
-----------------------------
---- ----------
------------ -------- -- ---
---------------- ---------------------------
---- ----------- ----- -
--- -------- - -------------------
-- --------- - -------- -
-------------------
------ ------
-
--- --------- - ---------------------------
--- -------- - ------------------ -- ---
--- ----- - -------------------------
-- -------- -
------------------
------ ------
-
--------------
--
---以上代码设置了 maxFileSize 和 acceptFileTypes，并在 add 回调函数中进行了校验。如果上传文件的大小或类型不符合要求，将弹出相应的提示框，并返回 false 阻止上传。
服务端校验
服务端校验是确保上传文件符合要求的最后一道关卡，也是最重要的一道关卡。我们应该始终对上传的文件进行校验并拒绝不符合要求的文件。以下是一个示例的服务端校验代码（使用 Node.js）：
-- -------------------- ---- -------
----- ------- - -------------------
----- ------ - ------------------
----- --- - ----------
----- ------- - --------------------
------------ ----- ----- --- -- -
-------- ------------
--
--------- ----- ----- --- -- -
-------- ---------- - --- - -------------------
-
---
----- ------ - --------
--------
------- - --------- ------- -- -- ---
----------- ----- ----- --- -- -
----- -------- - ---------------------------
----- ----- - -----------------------------
-- ------- -
-------- ------
- ---- -
------ ------------------ -------
-
-
------------------
------------------- ----- ---- -- -
----------- ---- ----- -- -
-- ----- -
----------------------------------
- ---- -
------------------
-
---
---
---------------- -- -- -
------------------- ------- -- ---- -------
---以上代码使用了 multer 库来
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11868