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

为了postJSON表示<form>，需要将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);

Answer 2

正如您提到的，您希望将文件与表单数据一起发送，您所做的事情是完全正确的。唯一缺少的是在 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);

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

Form Data Appears to be something else in Request Payload in Angular 4 http request

javascript

http

angular

angular4-forms