如何实现Flask Restful POST接口同时提交表单数据与上传图片

核心实现原理 #

HTTP 协议中的 multipart/form-data 媒体类型支持在单次请求中混合传输文本字段和二进制文件数据，是实现该需求的标准方案，不需要对RESTful API的设计逻辑做大幅改造。

具体实现步骤 #

1. 服务端接口改造 #

• 将原普通字段提交接口的请求媒体类型声明调整为支持multipart/form-data，停止单独使用application/json作为唯一接收类型
• 在接口参数中同时新增文件类型参数（可根据业务需求配置单文件/多文件接收、文件大小、格式校验规则），原有姓名、地址等普通文本参数保留
• 按需调整参数校验逻辑：可设置图片和普通字段同时为必填项，也可支持部分字段选填

2. 客户端请求适配 #

不同端的常规请求写法参考：

前端Web（原生JS）示例：

const formData = new FormData();
// 追加普通文本字段
formData.append('name', '张三');
formData.append('address', '北京市朝阳区XX街道');
// 追加图片文件，fileInput对应<input type="file">标签的DOM对象
formData.append('avatar', fileInput.files[0]);

// 发送请求
fetch('/api/submit-info', {
  method: 'POST',
  body: formData
  // 注意不要手动设置Content-Type头，浏览器会自动生成带boundary标识的正确值
})

服务端接口（Java Spring Boot 示例）：

@PostMapping(value = "/submit-info", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
public Result submitInfo(
        @RequestParam("name") String name,
        @RequestParam("address") String address,
        @RequestParam("avatar") MultipartFile avatar) {
    // 处理普通字段的业务逻辑、数据入库
    // 处理图片上传、存储逻辑
    return Result.success();
}

3. 异常兼容处理 #

• 提前配置服务端请求大小限制，避免大文件上传触发默认拦截规则导致接口报错
• 分别对普通字段的格式、图片的格式/大小做独立校验，返回明确的错误提示
• 若需要保证数据一致性，可增加事务控制：图片存储失败则回滚普通字段的入库操作，反之亦然

可选优化方案 #

如果存在大图片上传需求，也可以在该接口内扩展支持分片上传逻辑，单次请求同时传输分片文件块和对应的普通字段信息。

内容的提问来源于stack exchange，提问作者Nahidul Islam