Playwright中实现多文件上传的FormData解决方案

在实际的Web开发测试场景中，经常需要模拟包含重复字段名的多文件上传请求。本文将详细介绍如何使用Playwright测试框架的FormData功能来实现这一需求。

多文件上传的技术背景

HTTP协议允许通过multipart/form-data格式在单个请求中传输多个文件。当需要上传多个同类型文件时（例如多个"attachments"），传统的键值对形式会遇到字段名重复的问题。

Playwright的解决方案

Playwright通过支持原生的FormData对象，完美解决了这个问题。FormData是Web API标准的一部分，它允许开发者以编程方式构建表单数据，包括支持重复的字段名。

具体实现方法

以下是完整的实现示例：

// 创建FormData实例
const formData = new FormData();

// 添加JSON文件
formData.append('attachments', 
  new File([Buffer.from(JSON.stringify({ hello: 'Bob' }))], 
  'message.json', 
  { type: 'application/json' }));

// 添加PNG图片
formData.append('attachments', 
  new File([fs.readFileSync(pngPath)], 
  'test.png', 
  { type: 'image/png' }));

// 添加XML文件
formData.append('attachments', 
  new File([fs.readFileSync(xmlPath)], 
  'test.xml', 
  { type: 'text/xml' }));

// 发送请求
const response = await page.request.post('/api', {
  multipart: formData,
  headers: {
    'X-Xsrf-TOKEN': csrfToken,
  },
});

关键点说明

1. FormData对象：作为multipart请求的数据容器
2. append方法：可以重复添加相同名称的字段
3. File对象：用于封装文件数据和元信息
4. 类型指定：通过type参数确保服务器正确识别文件类型

实际应用场景

这种技术特别适用于：

• 邮件附件的批量上传
• 云存储的多文件提交
• 内容管理系统的媒体库管理
• 需要同时提交多种类型文件的业务场景

注意事项

1. 确保文件路径正确且可访问
2. 设置正确的Content-Type头部
3. 对于大文件，考虑分片上传
4. 注意CSRF等安全令牌的传递

通过这种方式，开发者可以轻松模拟各种复杂的多文件上传场景，为Web应用测试提供强有力的支持。