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

说明：

1. FileReader.readAsDataURL 读取后得到形如 data:image/png;base64,... 的字符串，需使用 split(',')[1] 去掉前缀。
2. 前端 POST 到 /api/upload/base64，请求体为 { filename, data }。

5. 后端实现（Spring Boot）

后端接收 JSON，解析 Base64，写入文件系统并返回访问 URL。

5.1 Maven 依赖

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

5.2 请求 DTO

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

5.3 控制器 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; }
    }
}

5.4 静态资源映射（可选）

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

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/");
    }
}

6. 安全性增强

上述已经完整讲解如何 Base64 格式文件上传，但在实际开发中，我们还应对文件进行进一步的安全检查，如：

6.1 文件类型验证

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

6.2 文件大小限制

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

解码 Base64 代码下追加如下代码：

byte[] bytes = DatatypeConverter.parseBase64Binary(req.getData());
if (bytes.length > 10 * 1024 * 1024) {
    throw new IllegalArgumentException("文件大小超过 10MB 限制");
}

6.3 文件名安全处理

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 或分片上传

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

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

如果你在实践过程中有任何疑问或更好的扩展思路，欢迎在评论区留言讨论。