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

Question

通过 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 添加额外的自定义标题？

欣赏任何建议

标签： javascriptfile-uploadrequestaxiosmultipartform-data

Answer 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>