php - Angular 2 http.post FormData() 到 PHP 上传文件

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

我有一个使用 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() 但我读到 FormData 方法在 TS 中没有得到很好的支持。)

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

<?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(更新了那个位。)

关于php - Angular 2 http.post FormData() 到 PHP 上传文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44588923/

相关文章:

php - 使用 Codeigniter 事件记录进行 "within distance"查询

php - 如何使用 PHP 在 Facebook 上分享帖子?

php - Laravel 5.3 中为 foreach() 提供的参数无效

angular - 编译 Angular 2 和 Firebase 存储时出错

php - 从 laravel 查询到 wordpress 数据库

javascript - Angular 2 - 在服务之间共享数据

firefox - Angular 2 + firefox + input + type=date datepicker 不显示

file-upload - 使用 OS Open 将 Golang 文件上传到 s3

java - InputStream 无限循环

java - 使用值 ajax upload 和 OctetStreamReader 上传的图片在 IE 中不起作用 - Java/JSP