表单数据在 Angular 4 http 请求中的请求有效负载中似乎是其他内容答案

【问题标题】：Form Data Appears to be something else in Request Payload in Angular 4 http request表单数据在 Angular 4 http 请求中的请求有效负载中似乎是其他内容
【发布时间】：2017-10-09 13:39:52
【问题描述】：

我正在尝试将文件上传到服务器，所以我将数据 json 转换为 formData，将文件附加到它，然后发送到请求。我在 requesPayload 中看到的请求负载不是 JSON，而是其他东西。

这里附上请求载荷截图：

组件功能代码如下：

doSubmit(data){
 const fd = new FormData();
    fd.append('name','Tirthraj');
    fd.append('file',this.myFile);

    for (var key in data) {
      if (data.hasOwnProperty(key)) {
        fd.append(key,data[key])
        console.log(key + " -> " + data[key]);
      }
    }

    this.myService.doUploadDataWithFile(fd).then();
}

这里是服务功能：

 doUploadDataWithFile(data): Promise<any> {
    let headers = new Headers();
    // headers.append('Content-Type', 'multipart/form-data');
    headers.append('Content-Type', 'undefined');
    let options = new RequestOptions({ headers: headers });
    console.log("ADDElearning  DATA", data);
    return this.http.post("SERVER_API", data, options).toPromise();
  }

这是请求负载：

------WebKitFormBoundary5Ga9J56YQxt16Ey4
Content-Disposition: form-data; name="name"

Tirthraj
------WebKitFormBoundary5Ga9J56YQxt16Ey4
Content-Disposition: form-data; name="file"; filename="524347_335264113233857_1091003137_n.jpg"
Content-Type: image/jpeg


------WebKitFormBoundary5Ga9J56YQxt16Ey4
Content-Disposition: form-data; name="module_title"

312
------WebKitFormBoundary5Ga9J56YQxt16Ey4
Content-Disposition: form-data; name="module_synopsis"

123
------WebKitFormBoundary5Ga9J56YQxt16Ey4
Content-Disposition: form-data; name="estimated_time"

321
------WebKitFormBoundary5Ga9J56YQxt16Ey4
Content-Disposition: form-data; name="module_type"

scorm12
------WebKitFormBoundary5Ga9J56YQxt16Ey4
Content-Disposition: form-data; name="article_title"

123312
------WebKitFormBoundary5Ga9J56YQxt16Ey4
Content-Disposition: form-data; name="article_description"

321
------WebKitFormBoundary5Ga9J56YQxt16Ey4--

我希望它像 JSON 对象，而不是现在的样子。有人可以帮忙吗？

【问题讨论】：

代码使用FormData。除了multipart/form-data 之外，不确定您还期待什么？ data 是什么？
数据是多字段的一种形式。其他输入标签也有一个文件
要使用JSON，您需要将File 对象转换为data URI。使用FormData 有什么问题？
我不确定它是如何工作的。您能否在答案中详细说明@guest271314

标签： javascript angular http angular4-forms

【解决方案1】：

正如您所提到的，您希望将文件与表单数据一起发送，您所做的事情是绝对正确的。唯一缺少的是在 php.ini 中访问该文件的正确方法。当您发送表单数据时。这意味着您正在发送带有该输入字段名称的整个表单。

这样你就可以访问它了

echo $_POST['module_title'];
var_dump($_FILES['file']);
var_dump($_FILES['file1'])
$filename = $_FILES['file']['name'];
move_uploaded_file($_FILES['file']['tmp_name'],'uploads/'.$filename);

【讨论】：

【解决方案2】：

要发布<form> 的JSON 表示，需要将File 对象转换为data URI； JSON 是一个字符串。

const props = {};
const reader = new FileReader;
reader.onload = () => {
  props["file"] = reader.result;
}

for (let [key, prop] of new FormData(form)) {
  if (!prop instance of File) {
    props[key] = prop;
  } else {
    reader.readAsDataURL(prop);
  }
}

const json = JSON.stringify(props);

【讨论】：

如果服务器端是 PHP 而不是节点，这会起作用吗？
是的，尽管这与实际问题无关