Javascript 如何使用fetch发布blob和JSON值

我正在使用头将

blob

图像文件传递给服务器

应用程序/octet流

我还需要将一些

string

值传递给服务器。如果我将标题更改为

application/json

我可以访问字符串，但是blob变得未定义

示例

  const data = {
          blob,
          firstname: 'Nichoals',
        };

fetch(url, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(data),
        })
          .then(response => response.blob())
          .then(blob => {
            ...
          })
          .catch(error => console.log(error));
      },
      'image/png',
      1,
    );

我尝试过的事情

我尝试使用

FormData（）

传递数据，并能够将数据获取到服务器，但文件已损坏。我确实认为我可以想出如何让它以这种方式工作，但如果可能的话，我想学习一种更好的方法

我不想做的事情

我不想将blob转换为字符串，因为我担心这会非常昂贵

问题

如果不使用上述方法，我可以用什么方法

将带有
blob
和一些
string
值的对象发布到服务器

从本质上说,

只要重读你试过的
FormData
无疑是这里“更好”的方式，如果您想帮助调试您提到的作为路障的损坏文件问题，您需要创建一个解决方案。不，谢谢，我不需要调试损坏文件的帮助。我想知道是否有一种方法可以不使用FormData（）完成此操作。谢谢你。如果没有，那也没关系。我只是想找一个明确的答案。我很惊讶这是一项如此艰巨的任务，我想我会找到一个可能的解决办法。我记不起以前必须做的每一件事。如果不使用
FormData
、字符串化blob或为blob和string值使用两个独立的
POST
s，就没有其他方法可以做到这一点。使用
FormData
确实不难，但根据经验，您的文件损坏可能与创建UTF-8编码的缓冲区而不是二进制缓冲区有关，这使得codepoints>0x7F的unicode字符有两个字节，而不是我认为的字符串，但会将blob的大小增加30%。我还考虑在结果回调中发送另一个fetch，但很好奇是否存在其他解决方案。尝试将其他值放在它们自己的对象中，将其转换为blob，然后将blob文件和blob对象发送到服务器，然后再从那里转换回来是否不合理？
const data = {
      blob,
       firstname: 'Will',
 };