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

关键点说明：

1. FileReader.readAsDataURL 读出来是带前缀的字符串（如 data:image/png;base64,...），记得用 split(',') 切掉前缀。
2. 前端 POST 到 /api/upload/base64，请求体结构为 { filename, data }。

后端实现（Spring Boot）

后端收到 JSON 后，解析 Base64，解码写入文件系统并返回访问 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 and setters...
}

控制器 Controller 实现

这里有个细节，旧代码常用 javax.xml.bind.DatatypeConverter，但在新版 Java 中推荐直接用 java.util.Base64。

@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 = java.util.Base64.getDecoder().decode(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，最好校验文件头。

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;
}

小结与注意事项

优点：接口简单，调试方便；兼容性好，适合嵌入 JSON。

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

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

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

通过上述流程，应该已经掌握了前端如何将文件转为 Base64、后端如何解析并保存的完整逻辑。希望能帮你快速在项目中落地小文件 Base64 上传功能！

如果在实践过程中有更好的扩展思路，欢迎交流讨论。