angular提交表格到php,Angular 2 http.post FormData()到PHP上传文件

我有一个使用A2 CLI的项目,我正在尝试使用带有type =“ file”的输入标签上载文件.就整个工作流程而言,我可以正常运行,但是我无法从客户端到服务器获取文件数据.

我在TypeScript中有以下代码：

myFnc(event){

let fileList: FileList = event.target.files;

if(fileList.length > 0) {

let file: File = fileList[0];

console.log(file);

console.log(file.name);

let formData:FormData = new FormData();

formData.append('uploadFile', file, file.name);

let headers = new Headers();

/*

this was the culprit:

headers.append('Content-Type', 'multipart/form-data');

worked for me by changing it to:

*/

headers.append('enctype', 'multipart/form-data');

headers.append('Accept', 'application/json');

let options = new RequestOptions({ headers: headers });

console.log(formData);

console.log(options);

this.http.post('./assets/data/upload-persona-document.service.php', formData, options)

.map(res => res.json())

.catch(error => Observable.throw(error))

.subscribe(

data =>{

console.log(data);

},

error =>{

console.log(error);

}

)

}

}

我没有任何错误,并在控制台中得到了要检查的结果. (我知道console.log(formData)实际上不会输出formData的内容.我已经尝试过.entries(),但是我已经读到TS中不完全支持FormData方法.)

在upload-persona-document.service.php中：

$target_dir = "../docs/Personas/";

$json = array();

$postData = file_get_contents("php://input");

$input = json_decode($postData);

$json['input'] = $input;

$json['post'] = ($_POST);

$json['files'] = $_FILES;

$target_file = $target_dir . basename($_FILES["uploadFile"]["name"]);

$uploadOk = 1;

$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);

echo json_encode($json);

// ...a bunch of code that will act on the data when I can finally get it correctly...

当我收到响应时,我得到：

[Log] {input: null, post: [], files: []} (main.bundle.js, line 1117)

我为丢失的东西感到难过.

解决方法:

因此,经过更多的挖掘和实验之后,结果发现我不得不在上面的headers.append()行中将Content-Type更改为enctype(更新了该位.)

标签：angular,file-upload,angular-cli,multipartform-data,php

来源： https://codeday.me/bug/20191111/2018631.html