将自定义标题添加到 Content-disposition 旁边的 FormData/multipart答案

【问题标题】：Add Custom Header to the FormData/multipart next to Content-disposition将自定义标题添加到 Content-disposition 旁边的 FormData/multipart
【发布时间】：2020-12-23 11:22:37
【问题描述】：

通过 multipartform-data 将图像发送到服务器，并为每个图像附加标头。

我想添加 lang 和 url 自定义标题。每张图片都需要在这些标题中包含个人值。

这是一个例子：

--B_kpXDt398Po5ytQzY0P6SBEM6VmzrsPAAINKJgt
lang: en
url: http://example.com
Content-Disposition: form-data; name="images"; filename="src%5Ctest%5Cresources%5CtestFile.jpeg"
Content-Type: image/jpeg

--B_kpXDt398Po5ytQzY0P6SBEM6VmzrsPAAINKJgt
lang: ru
url: http://anotherExample.com
Content-Disposition: form-data; name="images"; filename="src%5Ctest%5Cresources%5CtestFile.jpeg"
Content-Type: image/jpeg

我当前的代码：

let formData = new FormData();

let options = {
    header: {
      lang: 'en',
      url: 'example.com',
    }
};

// I also tried using these options:
//  let options = {
//      header: '\r\n lang: ru \r\n url: example.com'
//    };

formData.append("images", myImageBlob, options);

我用 Axios 发布表单并得到了这个：

------WebKitFormBoundaryqOIB7duTkYj0twQA
Content-Disposition: form-data; name="images"; filename="[object Object]"
Content-Type: image/png

是否有人对如何向 formData 添加额外的自定义标题有任何想法或线索？

感谢任何建议

【问题讨论】：

Headers 是在请求级别设置的，所以这里你想在一个请求中发送一张图片？
一个请求中的多个图像。总的来说，我想在每个图像的 Content-Disposition 标题旁边添加 lang 和 url 'tags'。
formData.append 不支持我认为的选项，请检查 - developer.mozilla.org/en-US/docs/Web/API/FormData/append

标签： javascript file-upload request axios multipartform-data

【解决方案1】：

此用例的一种方法是为lang 和url 提供额外的元数据表单发布字段

表格示例：

<form>
    
    <input type="file" name="images[]" multiple>
    <!--for first image-->
    <input type="hidden" name="images_lang[]" value="en">
    <input type="hidden" name="images_url[]" value="example.com">

    <!--for second image-->
    <input type="hidden" name="images_lang[]" value="ru">
    <input type="hidden" name="images_url[]" value="anotherexample.com">
</form>

【讨论】：