使用 Ionic/angular 将图像上传到 php 脚本不起作用

Question

我正在尝试让我的 Ionic 应用程序上传用户选择的图像。我阅读了几个教程，但是我没能成功。我希望该应用程序在浏览器中运行，因此我没有实施仅在移动平台上运行ning 的解决方案。

我的 angular 组件向托管以下 php 脚本的服务器发送 post 请求，并按指定创建 "uploads" 文件夹。但是每次我想上传我的文件时，我都会收到 PHP-Script 中指定的 "There was an error uploading the file, please try again!" 消息。

我想我可能以错误的格式发送了数据，但我知道该怎么做。

知道我的问题是什么吗？

<?php
header('Access-Control-Allow-Origin: *');
$target_path = "uploads/";

$target_path = $target_path . basename( $_FILES['file']['name']);


if(move_uploaded_file($_FILES['file']['tmp_name'], $target_path)) {
    header('Content-type: application/json');
    $data = ['success' => true, 'message' => 'Upload and move success'];
    echo json_encode( $data );
} else{
    header('Content-type: application/json');
    $data = ['success' => false, 'message' => 'There was an error uploading the file, please try again!'];
    echo json_encode( $data );
}

?>

这是我组件中的 Typescript 代码：


import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { HttpClient } from '@angular/common/http';


@Component({
  selector: 'app-erledigt-modal',
  templateUrl: './erledigt-modal.component.html',
  styleUrls: ['./erledigt-modal.component.scss'],
})
export class ErledigtModalComponent implements OnInit {

   constructor(private http: HttpClient) { }

  selectedFile = null;

  ngOnInit() {

  }

  onFileChanged(event) {
      this.selectedFile = <File>event.target.files[0]
  }

  onUpload() {

    const uploadData = new FormData();
    uploadData.append('image', this.selectedFile, this.selectedFile.name);
    this.http.post('https://...MyAPI.../upload.php', uploadData).subscribe(res => {
      console.log(res);
    });
  }


}

我还尝试了以下 POST-请求但没有成功：

this.http.post('https://...MyAPI.../upload.php', this.selectedFile).subscribe(res => {
      console.log(res);
});
  }

我的 HTML 看起来像这样：

<input type="file" (change)="onFileChanged($event)">
<button type="button" (click)="onUpload()">Upload</button>

Answer 1

我找到了解决方案....

if(move_uploaded_file($_FILES['file']['tmp_name'], $target_path))

和

uploadData.append('image', this.selectedFile, this.selectedFile.name);

不能一起工作，因为我在表单数据中使用的名称是 'image' 而 PHP 脚本期望 'file'.. 所以将 'image' 更改为 'file' 是解决方案...

使用 Ionic/angular 将图像上传到 php 脚本不起作用

Uploading image with Ionic/angular to php script does not work

php

image-uploading

typescript

ionic-framework

angular