javascript - 使用 Dojo xhr 通过 json 和文件上传发送多部分表单

Question

我尝试过让它工作，但没有找到任何解决方案。最接近我的问题的是这个 - Composing multipart/form-data with a different Content-Type on each parts with Javascript (or Angular) - 但问题作者停在中间。我不能。

这就是故事 - 我用 .NET 编写了 Web 服务。它基于POST - 我必须发送 - JSON 数据(带有标题、内容等)以及刚刚从用户光盘上传的文件。我从 DOJO 对话框发送此信息。我实际上做的是创建 AJAX post 请求并将其发送到服务器。

所以我应该使用“multipart/form-data”。问题是我必须收集要从各种来源发送的数据(不仅仅是表单元素中提供的数据)。我的代码看起来像这样。

var values = { // here I create simple JS object with data from multiple places };
var formData = new FormData();

formData.append('data', json.stringify(values));   // Object to JSON
var files = document.getElementById("files").files;
var file = files[0];
formData.append("file0", file);

xhr.post('link_to_my_service',  
{ 
    handleAs: "json",
    sync: false,
    data: formData,
    headers: {                     
         'X-Requested-With': '',
         'Content-Type': false,   
         'Accept': 'application/javascript, application/json'
    }
}) // handlers are not important

它转到服务，服务接受它(“X-Requested-With”用于安全传递)。我在控制台中的请求如下所示。

------WebKitFormBoundaryDyeoTyKXhr5oZ1a9
Content-Disposition: form-data; name="data"    
{"key1":"value2","key2":"value1","key3":666,"key4":999}

------WebKitFormBoundaryDyeoTyKXhr5oZ1a9
Content-Disposition: form-data; name="file0"; filename="name_of_my_file.opml"
Content-Type: application/octet-stream

------WebKitFormBoundaryDyeoTyKXhr5oZ1a9--

而且它不起作用。发生这种情况是因为请求的“数据”部分没有设置“内容类型”!我无法以任何方式做到这一点。建议的解决方案是创建 BLOB，然后向其传递 JSON 字符串。但它也不起作用 - 它添加了“Content-Type”(虽然跳过了字符集)，但添加了文件名，并且在控制台中我看到这部分的实际内容是空的(尽管相同的是对于文件 - 我不知道 Chrome 是否应该向我显示我的文件的完整内容)。

所以现在我陷入困境 - 我不知道如何继续。我没有办法改变服务。有人知道如何欺骗 Dojo 来实现我的目标吗？是的，我正在使用 Dojo 1.10。

Answer 1

也许有点晚了，但迟到总比不好。

您标记为最接近您的问题的链接已经提供了解决方案。 (Yeo 的最后回答)

因此，根据该答案，我将尝试像这样构建我的 FormData 对象:

let formData = new FormData();

// add the file to your form data.
formData.append('file', file);    

// create an object like structure in your form data.
for (let key in values) {
  if(values.hasOwnProperty(key)) {
    formData.append(`data[${key}]`, values[key]);
  }
}

// set up your post requests options.
...

let handle = xhr.post(url, options);

然后在服务器端，您可以通过迭代请求正文部分并收集所需的字段，将其解析回对象。