UniApp文件选择上传时如何限制文件类型和大小？

Question

在UniApp开发中，如何在文件选择与上传时有效限制文件类型和大小是一个常见问题。当用户选择文件时，若不限制类型和大小，可能会导致上传失败或影响应用性能。 **技术问题描述：** 使用`uni.chooseImage`或`uni.chooseFile`接口时，虽然可以设置`fileType`来限制图片类型，但无法直接限制其他文件类型或精确控制文件大小。例如，需求是只允许用户上传小于2MB的PDF文件，但在实际开发中发现，即使通过正则表达式初步筛选文件后缀，也无法完全避免用户上传超大文件或非PDF格式文件的情况。此外，不同平台（如iOS、Android）对文件选择的兼容性也会影响限制逻辑的实现效果。 如何优雅地解决这一问题，确保文件类型和大小符合要求，同时兼顾用户体验？

Answer 1

UniApp 文件选择与上传：限制文件类型和大小的优雅解决方案

1. 问题背景与需求分析

在UniApp开发中，用户通过`uni.chooseImage`或`uni.chooseFile`接口选择文件时，若不限制文件类型和大小，可能会导致以下问题：

• 文件类型不符合要求（如上传了非PDF文件）。
• 文件过大影响应用性能或服务器存储压力。
• 不同平台（iOS、Android）对文件选择接口的支持程度不一致，可能引发兼容性问题。

例如，当需求为“只允许用户上传小于2MB的PDF文件”时，单纯依赖正则表达式筛选后缀名无法完全避免用户上传超大文件或错误格式文件的情况。

2. 技术实现方案

以下是分步骤解决该问题的技术方案：

1. 前端初步校验：在用户选择文件后，立即验证文件类型和大小。
2. 后端二次校验：即使前端校验通过，仍需在服务器端再次验证文件合法性。
3. 跨平台兼容处理：针对iOS和Android的不同行为进行适配。

具体实现代码如下：

function validateFile(file) {
    const MAX_SIZE = 2 * 1024 * 1024; // 2MB
    const allowedTypes = ['application/pdf']; // PDF MIME 类型

    if (!allowedTypes.includes(file.type)) {
        uni.showToast({ title: '仅支持PDF文件', icon: 'none' });
        return false;
    }

    if (file.size > MAX_SIZE) {
        uni.showToast({ title: '文件大小不能超过2MB', icon: 'none' });
        return false;
    }

    return true;
}

uni.chooseFile({
    count: 1,
    success(res) {
        const file = res.tempFiles[0];
        if (validateFile(file)) {
            uploadFile(file); // 调用上传函数
        }
    },
    fail(err) {
        console.error('文件选择失败', err);
    }
});
    

3. 流程图分析

以下是文件选择与上传的整体流程图：

graph TD
            A[用户选择文件] --> B{是否符合类型？}
            B --是--> C{是否小于2MB？}
            C --是--> D[上传至服务器]
            B --否--> E[提示错误]
            C --否--> F[提示错误]

4. 兼容性与用户体验优化

在实际开发中，还需要考虑以下几点：

问题	解决方案
iOS平台无法直接限制文件类型	通过`file.type`属性动态校验文件MIME类型
Android平台文件路径解析差异	统一使用`tempFilePath`作为文件路径
文件过大时用户体验差	提前校验并给出明确提示，避免长时间等待

此外，可以通过增加进度条等方式提升用户体验。

5. 后端校验的重要性

尽管前端可以有效过滤大部分非法文件，但由于可能存在绕过前端校验的情况，因此后端校验同样不可或缺。以下是后端校验的基本逻辑：

• 检查文件MIME类型是否为`application/pdf`。
• 确保文件大小不超过2MB。
• 可选：使用第三方库进一步验证文件内容是否确实为PDF格式。

例如，在Node.js中可以这样实现：

const fs = require('fs');
const path = require('path');

function validatePdf(filePath) {
    const stats = fs.statSync(filePath);
    if (stats.size > 2 * 1024 * 1024) {
        return false; // 超过2MB
    }

    const mimeType = require('mime-types').lookup(filePath);
    if (mimeType !== 'application/pdf') {
        return false; // 非PDF文件
    }

    return true;
}