如何删除错误500上传图片使用Angular和PHP

Question

如何消除POST 500错误？上传图像时，我得到：

scheduleTask@zone常青.js:2845scheduleTask@zone常青.js:385onScheduleTask@zone常青树.js:272scheduleTask@zone常青.js:378scheduleTask@zone常青.js:210scheduleMacroTask@zone常青.js:233scheduleMacroTaskWithCurrentZone@zone-长青.js:1134(匿名(@zone长青js:2878原型。@zone常青.js:1449发送@AjaxObservable.js:[e-mail]:122_订阅@AjaxObservable.js:[e-mail]:42 [e-mail]:28 [e-mail]:[e-mail]:[e-mail]:[e-mail]:14345(匿名(@platformbrowser.js:582invokeTask@zone常青.js:399 [e-mail]:27418invokeTask@zone-常青.js:398 runTask@zone常青js:167invokeTask@zone-常青.js:480 invokeTask@zone-常青js:1621globalZoneWareCallback@zone常青.js:1647

uploader.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { ajax } from 'rxjs/ajax';
@Injectable({
providedIn: 'root'
})
export class UploaderService {
apiUrl = 'https://xxxx.com/api/index.php/';
constructor(private http: HttpClient) { }
uploadImage(formData) {
return ajax.post(`${this.apiUrl}api/upload`, formData);
}
deleteImage(formData) {
return this.http.post<any>(`${this.apiUrl}api/deleteImage`, formData)
.pipe(
catchError(this.handleError)
);
}
saveUser(formData) {
return this.http.post<any>(`${this.apiUrl}api/saveUser`, formData)
.pipe(
catchError(this.handleError)
);
}
private handleError(error: HttpErrorResponse) {
if (error.error instanceof ErrorEvent) {
// A client-side or network error occurred. Handle it accordingly.
console.error('An error occurred:', error.error.message);
} else {
// The backend returned an unsuccessful response code.
// The response body may contain clues as to what went wrong,
console.error(`Backend returned code ${error.status}, ` + `body was: ${error.error}`);
}
// Return an observable with a user-facing error message.
return throwError('Something bad happened. Please try again later.');
}
}

上传器组件.ts

import { Component, OnInit, Renderer2, ElementRef, ViewChild, EventEmitter, Output } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { UploaderService } from '../uploader.service';
@Component({
selector: 'app-uploader',
templateUrl: './uploader.component.html',
styleUrls: ['./uploader.component.css']
})
export class UploaderComponent implements OnInit {
userForm: FormGroup;
error: string;
uploadError: string;
@ViewChild('image') private image: ElementRef;
@Output() close = new EventEmitter();
constructor(
private fb: FormBuilder,
private uploaderService: UploaderService,
private renderer: Renderer2
) { }
ngOnInit() {
this.userForm = this.fb.group({
user_name: [''],
curp: [''],
email: ['']
});
}
onSelectedFile(event) {
if (event.target.files.length > 0) {
const productImage = event.target.files[0];
const formData = new FormData();
formData.append('productImage', productImage);
this.uploaderService.uploadImage(formData).subscribe(
res => {
if (res.status === 200 && res.response.status === 'success') {
this.uploadError = '';
const li: HTMLLIElement = this.renderer.createElement('li');
const img: HTMLImageElement = this.renderer.createElement('img');
img.src = res.response.imagePath;
this.renderer.addClass(img, 'product-image');
const a: HTMLAnchorElement = this.renderer.createElement('a');
a.innerText = 'Delete';
this.renderer.addClass(a, 'delete-btn');
a.addEventListener('click', this.deleteUserImage.bind(this, res.response.filename, a));
this.renderer.appendChild(this.image.nativeElement, li);
this.renderer.appendChild(li, img);
this.renderer.appendChild(li, a);
} else {
this.uploadError = res.response.message;
}
},
err => this.error = err
);
}
}
deleteUserImage(filename, a) {
const formData = new FormData();
formData.append('filename', filename);
this.uploaderService.deleteImage(formData).subscribe(
res => {
a.parentElement.remove();
},
err => this.error = err
);
}
onSubmit() {
const formData = new FormData();
formData.append('user_name', this.userForm.get('user_name').value);
formData.append('curp', this.userForm.get('curp').value);
formData.append('email', this.userForm.get('email').value);
this.uploaderService.saveUser(formData).subscribe(
res => {
if (res.status === 'success') {
this.onClose(res);
}
},
err => this.error = err
);
}
onClose(data: any) {
this.close.emit(data);
}
}

控制器Api.php

<?php
defined('BASEPATH') or exit('No direct script access allowed');
class Api extends CI_Controller
{
public function __construct()
{
parent::__construct();
$this->load->model('api_model');
}
public function upload()
{
header("Access-Control-Allow-Origin: *");
header("Access-Control-Request-Headers: GET,POST,OPTIONS,DELETE,PUT");
$filename = NULL;
$isUploadError = FALSE;
$fullPath = '';
if ($_FILES && $_FILES['productImage']['name']) {
$config['upload_path']          = './tmp';
$config['allowed_types']        = 'jpg|jpeg|png|gif';
$config['max_size']             = 10024;
$this->load->library('upload', $config);
if (!$this->upload->do_upload('productImage')) {
$isUploadError = TRUE;
$response = array(
'status' => 'error',
'message' => $this->upload->display_errors()
);
} else {
$uploadData = $this->upload->data();
$filename = $uploadData['file_name'];
$fullPath = base_url('tmp/' . $filename);
}
}
if (!$isUploadError) {
$response = array(
'status' => 'success',
'filename' => $filename,
'imagePath' => $fullPath
);
}
$this->output
->set_content_type('application/json')
->set_output(json_encode($response));
}
public function deleteImage()
{
header("Access-Control-Allow-Origin: *");
header("Access-Control-Request-Headers: GET,POST,OPTIONS,DELETE,PUT");
$filename = $this->input->post('filename');
$filePath = './tmp/' . $filename;
if (file_exists($filePath)) {
if (unlink($filePath)) {
$response = array(
'status' => 'deleted'
);
} else {
$response = array(
'status' => 'not delete'
);
}
} else {
$response = array(
'status' => 'file not exist'
);
}
$this->output
->set_content_type('application/json')
->set_output(json_encode($response));
}
public function saveUser()
{
header("Access-Control-Allow-Origin: *");
header("Access-Control-Request-Headers: GET,POST,OPTIONS,DELETE,PUT");
$user_name = $this->input->post('user_name');
$curp = $this->input->post('curp');
$email = $this->input->post('email');
if ($user_name) {
$userData = array(
'user_name' => $user_name,
'curp' => $curp,
'email' => $email,
'is_active' => 1,
'created_at' => date('Y-m-d H:i:s', time())
);
$id = $this->api_model->insert_user($userData);
$tmpDir    = 'tmp';
$files = scandir($tmpDir);
$imageData = array();
foreach ($files as $filename) {
if (!in_array($filename, array(".", ".."))) {
$imageData[] = array(
'user_id' => $id,
'image' => $filename
);
rename('tmp/' . $filename, 'uploads/' . $filename);
}
}
if (!empty($imageData)) {
$this->api_model->insert_user_image($imageData);
$response = array(
'status' => 'success',
'message' => 'User added successfully'
);
} else {
$response = array(
'status' => 'error'
);
}
}
$this->output
->set_content_type('application/json')
->set_output(json_encode($response));
}
}
?>

型号Api_Model.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Api_model extends CI_model {

public function insert_user($userData)
{
$this->db->insert('users',$userData);
return $this->db->insert_id();
}
public function insert_user_image($imageData)
{
$this->db->insert_batch('user_images', $imageData);
}
}
?>

Answer 1

在此部分中：

return ajax.post(`${this.apiUrl}api/upload`, formData);

替换为：

const headers = new HttpHeaders().set('Accept', 'application/json');
return this.http.post(`${this.apiUrl}api/upload`, formData, { headers }).pipe(map((resp: any) => { return resp; }));

这是我用来上传文件和数据到一个服务。