如何在 Miragejs 中处理 FormData？

发布于 2025-01-15 16:42:27 字数 841 浏览 2 评论 0原文

Miragejs 可以开箱即用地处理 json，但似乎无法处理 FormData。当我发布 FormData 并在 Mirage 端点中记录收到的请求时，request.requestBody 为空。

简化的代码示例：

POSTing FormData：

const testFile = new File(['hello'], 'hello.png', { type: 'image/png' });
const formData = new FormData('file', testFile);
fetch('https://localhost:3000/api/endpoint', {method: 'POST', body: formData});
// ...

在 Mirage 模拟服务器中接收 POST：

this.post('/endpoint', (schema, request) => {
  console.log('request:', request);
  // request.requestBody is an empty string!  
});

可能是相关问题：https://github.com/miragejs/ember-cli-mirage/issues/74

原文

Miragejs handles json out-of-the-box but seems to be unable to handle FormData. When I post FormData and log the received request in mirage endpoint, request.requestBody is empty.

Simplified code examples:

POSTing FormData:

const testFile = new File(['hello'], 'hello.png', { type: 'image/png' });
const formData = new FormData('file', testFile);
fetch('https://localhost:3000/api/endpoint', {method: 'POST', body: formData});
// ...

receiving POST in mirage mock server:

this.post('/endpoint', (schema, request) => {
  console.log('request:', request);
  // request.requestBody is an empty string!  
});

Possibly a related issue: https://github.com/miragejs/ember-cli-mirage/issues/74

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

握住我的手 2025-01-22 16:42:27

可以将 request.requestBody 转换为 FormData，然后解析该文件。

缩短如何在前端应用测试中处理上传和解析文件：

this.post('/endpoint', (schema, request) => {
  const readFile = async (file: File): Promise<string> =>
    new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onerror = () => reject(new Error('There was an error reading the file!'));
      reader.onload = () => resolve(reader.result as string);
      reader.readAsText(file);
    });
  const formData: FormData = request.requestBody as unknown as FormData;
  const uploadFile: File = formData.get('file') as File;
  const fileContents: string = await readFile(uploadFile);
  console.log('Uploaded file contents:', fileContents);
});

It's possible to cast the request.requestBody to FormData and then parse the file.

Shortening the excellent solution described in How to handle uploading and parsing files in your frontend app tests:

this.post('/endpoint', (schema, request) => {
  const readFile = async (file: File): Promise<string> =>
    new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onerror = () => reject(new Error('There was an error reading the file!'));
      reader.onload = () => resolve(reader.result as string);
      reader.readAsText(file);
    });
  const formData: FormData = request.requestBody as unknown as FormData;
  const uploadFile: File = formData.get('file') as File;
  const fileContents: string = await readFile(uploadFile);
  console.log('Uploaded file contents:', fileContents);
});

回复收藏 0 原文

~没有更多了~