Angular向ExpressJS发送Blob图片遇Multer+Serverless报错求助

1. 修复前端请求的Content-Type配置 #

手动设置multipart/form-data会丢失FormData自动生成的boundary分隔符，导致后端无法正确解析表单。删除手动添加的Content-Type头，Angular会自动处理表单的Content-Type（包含正确的boundary）：

uploadImage(imageData: File) {
    console.log('IMAGE DATA', imageData);
    let formData = new FormData();
    formData.append('file', imageData, 'file.png');
    
    // 移除手动设置的Content-Type，仅保留必要的Accept头（可选）
    let headers = new HttpHeaders();
    headers.append('Accept', 'application/json');
    let options = { headers: headers };

    const api = environment.slsLocal + '/add-image';
    const req = new HttpRequest('PUT', api, formData, options);

    return this.http.request(req);
}

2. 调整Express中间件顺序，避免请求体被提前解析 #

express.json()会优先解析JSON格式的请求体，而multer需要处理原始的multipart请求数据。将文件上传路由放在express.json()中间件之前，防止原始请求体被消耗：

修改app.ts：

import cors from 'cors';
import express from 'express';
import routers from './routes';
const app = express();

app.use(cors({ maxAge: 43200 }));

// 先挂载文件上传相关路由，绕过json解析器
app.use('/appRoutes', routers.appRouter);

// 仅对非文件上传路由应用json解析器
app.use(
    express.json({
        verify: (req: any, res: express.Response, buf: Buffer) => {
            req.rawBody = buf;
        }
    })
);

// 移除bodyParser.urlencoded，multer会处理multipart数据
export default app;

3. 修复后端路由的重复响应问题 #

路由中存在两次响应逻辑，会触发Cannot set headers after they are sent错误，导致程序崩溃。保留单一响应分支：

router.put(
    '/add-image',
    multerUploadInMemory.single('file'),
    async (req, res: Response) => {
        try {
            if (!req.file || !req.file.buffer) {
                throw new Error('File or buffer not found');
            }

            console.log(`Upload Successful!`);
            return res.status(200).json({ 
                message: 'file uploaded',
                test: 'success' 
            });
        } catch (e) {
            console.error(`ERROR: ${e.message}`);
            return res.status(500).json({
                message: e.message
            });
        }
    }
);

4. 完善Serverless二进制配置 #

除了serverless-apigw-binary插件，需确保API Gateway允许传递multipart/form-data类型的二进制数据：

1. 安装插件：

npm install serverless-apigw-binary --save-dev

2. 在serverless.yml中完整配置：

plugins:
  - serverless-apigw-binary

custom:
  apigwBinary:
    types:
      - 'multipart/form-data' # 必须添加，上传的是表单类型的二进制数据
      - 'image/png'

provider:
  name: aws
  runtime: nodejs18.x
  apiGateway:
    binaryMediaTypes:
      - 'multipart/form-data'
      - 'image/png'

5. 本地开发注意事项 #

使用serverless offline时，需重启服务让配置生效；若仍有问题，尝试更新相关依赖版本：

npm update serverless serverless-offline

完成以上配置后，后端即可正确接收FormData中的文件，你可以通过req.file.buffer将图片内容发送至Discord。

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