javascript - 使用带有 json 和文件上传的 Dojo xhr 发送多部分表单

Question

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

这就是故事 - 我得到了用 .NET 编写的网络服务。它基于 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);

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