Я пытаюсь заставить приложение Ioni c загрузить изображение, выбранное пользователем. Я прочитал несколько уроков, но мне не удалось заставить его работать. Я хочу, чтобы приложение запускалось в браузере, поэтому я не реализовал решение, работающее только на мобильных платформах.
Мой angular компонент отправляет запрос на публикацию на сервер, где следующий php -скрипт размещается, и папка «загрузки» создается, как указано. Но каждый раз, когда я хочу загрузить свой файл, я получаю сообщение «Произошла ошибка при загрузке файла, пожалуйста, попробуйте еще раз!» сообщение, указанное в моем PHP -Script.
Я думаю, что я могу послать данные в неправильном формате, однако могу выяснить, что делать.
Любые идеи, в чем может быть моя проблема ?
<?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);
});
}
My HTML выглядит просто так:
<input type="file" (change)="onFileChanged($event)">
<button type="button" (click)="onUpload()">Upload</button>