前端 Base64 格式文件上传详解：原理、实现与最佳实践

说明：

1. FileReader.readAsDataURL 读取后得到包含 MIME 类型前缀的字符串，使用 split(',')[1] 去掉前缀只保留纯 Base64 内容。
2. 前端 POST 到 /api/upload/base64，请求体为 { filename, data }。

后端实现（Spring Boot）

服务端拿到 JSON 后，核心任务就是解码并落盘，同时返回访问 URL。

Maven 依赖

<!-- pom.xml -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

请求 DTO

// 请求 DTO
public static class Base64Request {
    private String filename;
    private String data;
    // getters/setters...
}

控制器 Controller 实现

@RestController
@RequestMapping("/api/upload")
public class UploadController {
    // 文件保存根路径
    private static final String UPLOAD_DIR = "/tmp/uploads/";

    @PostMapping("/base64")
    public ResponseEntity<?> uploadBase64(@RequestBody Base64Request req) {
        try {
            if (req.getData() == null || req.getFilename() == null) {
                return ResponseEntity.badRequest().body(new ErrorResponse("参数不完整"));
            }

            // 1. 生成唯一文件名，防止覆盖
            String ext = StringUtils.getFilenameExtension(req.getFilename());
            String newName = UUID.randomUUID().toString() + "." + ext;

            // 2. 解码 Base64
            byte[] bytes = DatatypeConverter.parseBase64Binary(req.getData());

            // 3. 确保目录存在
            File dir = new File(UPLOAD_DIR);
            if (!dir.exists()) dir.mkdirs();

            // 4. 写文件
            File target = Paths.get(UPLOAD_DIR, newName).toFile();
            try (FileOutputStream fos = new FileOutputStream(target)) {
                fos.write(bytes);
            }

            // 5. 构造访问 URL（示例直接返回本地路径）
            String url = "/uploads/" + newName;
            return ResponseEntity.ok(new UploadResponse(url));
        } catch (Exception e) {
            e.printStackTrace();
            return ResponseEntity.status(500).body(new ErrorResponse("服务器内部错误"));
        }
    }

    // 成功响应
    public static class UploadResponse {
        private String url;
        public UploadResponse(String url) { this.url = url; }
        public String getUrl() { return url; }
    }

    // 错误响应
    public static class ErrorResponse {
        private String message;
        public ErrorResponse(String msg) { this.message = msg; }
        public String getMessage() { return message; }
    }
}

静态资源映射（可选）

如果文件是上传至自己服务器且要通过浏览器直接访问，可在配置中添加资源映射（云存储可忽略）：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.*;

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/uploads/**").addResourceLocations("file:/tmp/uploads/");
    }
}

安全性增强

上述流程完整讲解了如何上传，但在实际开发中，必须对文件进行进一步的安全检查，防止任意文件写入风险。

文件类型验证

不要完全信任前端传来的 mimeType，建议通过文件头（Magic Number）校验。

private void validateFileContent(byte[] data, String mimeType) throws IOException {
    try (InputStream is = new ByteArrayInputStream(data)) {
        String detectedType = URLConnection.guessContentTypeFromStream(is);
        if (!mimeType.equals(detectedType)) {
            throw new SecurityException("文件类型不匹配：" + mimeType + " vs " + detectedType);
        }
    }
}

文件大小限制

Base64 会膨胀数据量，务必限制解码后的实际大小。

# application.properties
spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB

解码代码追加如下：

if (bytes.length > 10 * 1024 * 1024) {
    throw new IllegalArgumentException("文件大小超过 10MB 限制");
}

文件名安全处理

防止路径遍历攻击和重名覆盖。

private String sanitizeFilename(String filename) {
    // 移除路径信息
    String safeName = filename.replaceAll(".*[/\\\\]", "");
    // 替换非法字符
    safeName = safeName.replaceAll("[^a-zA-Z0-9._-]", "_");
    // 防止重名覆盖
    if (Files.exists(uploadDir.resolve(safeName))) {
        String baseName = safeName.substring(0, safeName.lastIndexOf('.'));
        String ext = safeName.substring(safeName.lastIndexOf('.'));
        safeName = baseName + "_" + System.currentTimeMillis() + ext;
    }
    return safeName;
}

小结与注意事项

优点：接口简单，调试方便；兼容性好，适合纯文本传输环境。

缺点：Base64 会膨胀数据量，网络传输效率低；不适合大文件。

建议：仅在小文件（头像、文档缩略图等）场景使用；大文件请优先考虑 multipart/form-data 或分片上传。

安全：上传目录务必做好访问权限控制，严格校验文件类型，防止任意文件写入与执行。