javascript - 表单数据在 Angular 4 http 请求的 Request Payload 中似乎是其他内容

Question

我正在尝试将文件上传到服务器，所以我所做的是将我的数据 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 对象，而不是现在的样子。有人可以帮忙吗？

Answer 1

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

这样你就可以访问它了

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);