Question

我正在尝试上传Angular 4中的文件，并使用其他数据（如文本）将其发送到php，当我使用var_dumb（）读取文件对象为空的数据时。

我的post.component.html：

<a class="upload-photo-item">
            <input type="file" class="Upload-photo" accept="image/*" ngf-max-size="2MB" (change)="handleInputChange($event)"/>
            <i class="fa fa-tags olymp-computer-icon" aria-hidden="true"></i>

            <h6>Upload Photo</h6>
            <span>Browse your computer.</span>
        </a>

这是handleInputChange函数：

    post = new PostObject();
    image: File;

 handleInputChange(event) {
        console.log(event);
        this.image = event.target.files[0];

        var pattern = /image-*/;

        if (!this.image.type.match(pattern)) {
            console.log('File is not an image');
            return;
        }
        this.post.postPhoto = this.image;

        console.log('image :' + this.image);
  }

到目前为止，一切都很完美，我可以在控制台中看到我的Object文件，现在问题出在这里：

我的post.php：

$data = json_decode(file_get_contents('php://input'), true);
var_dump($data);
exit;

带有数组（0）的API响应如下：

可以通过base64来解决，但这不是我的选择，请问有什么想法吗？

Answer 1

希望这会有所帮助，如何在Angular 2 +中发送formdata：

    import {HttpClient, HttpHeaders} from '@angular/common/http';
    ...
    constructor(private http: HttpClient) {}
    ...
    test() {
            const formData = new FormData();
            formData.append('data', JSON.stringify({
                test: 'test'
            }));
            formData.append('file', file);

            const headers = new HttpHeaders().set('Content-Type', []);

            // responseType 'text' is necessary for IE
            return this.http.post(url, formData, {
                headers,
                responseType: 'text'
            });
    }

上传Angular 4中的文件并将其传递给php文件

1 个答案: