Element上传多张图片时如何限制文件大小与格式？

Question

在使用Element UI实现多图片上传时，如何有效限制文件大小与格式是一个常见问题。若限制不当，可能导致服务器负载过高或用户上传不符合要求的文件。例如，需求规定只允许上传jpg、png格式且单个文件不超过2MB的图片，但用户却能上传超大或非法格式文件。这是因为未正确配置`accept`属性与`before-upload`钩子函数。`accept`仅用于浏览器原生限制，而`before-upload`可对文件进行自定义校验。正确的做法是在`before-upload`中检查文件类型与大小：通过`file.type`判断格式是否为允许的`image/jpeg`或`image/png`，并用`file.size`确保文件小于2MB（即2 * 1024 * 1024字节）。如果校验失败，可通过`el-message`提示用户错误信息，从而提升用户体验与系统稳定性。

Answer 1

1. 问题背景与常见误区

在使用Element UI实现多图片上传时，文件大小和格式的限制是一个常见需求。如果限制不当，可能会导致服务器负载过高或用户上传不符合要求的文件。例如，需求规定只允许上传jpg、png格式且单个文件不超过2MB的图片，但用户却能上传超大或非法格式文件。

这种问题通常源于对`accept`属性和`before-upload`钩子函数的理解不足。`accept`仅用于浏览器原生限制，而`before-upload`可以进行更严格的自定义校验。

2. 技术分析：为什么需要`before-upload`？

`accept`属性虽然可以指定文件类型，但它仅限于浏览器的前端过滤，并不能完全阻止用户通过其他方式上传非法文件。因此，我们需要结合`before-upload`钩子函数对文件进行深度校验。

• 文件类型校验：通过`file.type`判断文件是否为`image/jpeg`或`image/png`。
• 文件大小校验：确保文件大小小于2MB（即2 * 1024 * 1024字节）。

如果不进行这些校验，可能会导致以下问题：

问题	影响
文件过大	增加服务器负载，可能导致系统崩溃。
文件格式不合法	破坏业务逻辑，可能引发安全漏洞。

3. 解决方案：如何正确配置

正确的做法是在`before-upload`中检查文件类型与大小。以下是具体实现代码：

    beforeUpload(file) {
        const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPGorPNG) {
            this.$message.error('只能上传 JPG 或 PNG 格式的图片！');
        }
        if (!isLt2M) {
            this.$message.error('上传的图片大小不能超过 2MB！');
        }

        return isJPGorPNG && isLt2M;
    }
    

以上代码通过`el-message`组件提示用户错误信息，从而提升用户体验与系统稳定性。

4. 流程图：文件上传校验逻辑

以下是文件上传校验的流程图，帮助理解整个校验过程：

graph TD;
            A[用户选择文件] --> B{文件类型是否合法};
            B -- 是 --> C{文件大小是否小于2MB};
            B -- 否 --> D[提示：只能上传 JPG 或 PNG 格式];
            C -- 是 --> E[上传成功];
            C -- 否 --> F[提示：文件大小不能超过 2MB];

通过该流程图可以看出，`before-upload`钩子函数在整个校验过程中起到了关键作用。