我想使用ngx-uploader上传文件。我不知道如何设置要发送到后端的数据
backend.php
public function add_icon() {
$retval = array();
$icon = '';
$FILE_DIR = './images/';
if($_POST || $_FILES) {
if(!empty($_FILES['icon']['name'])) {
$icon = $_FILES['icon']['name'];
}
$should_save = true;
$guid = rand();
if($icon != '') {
$type = strtolower($_FILES['icon']['name']);
$extArray = array(".jpg",".jpeg",".gif",".png");
if (!in_array(strtolower(strrchr($type, ".")), $extArray)) {
$retval['message'] = 'Invalid file format.';
$should_save = false;
}
if($should_save) {
$ext=$this->getExtension($_FILES['icon']['name']);
$icon = time().'icon'.$guid.'.'.$ext;
$icon = $this->uploadFile($_FILES['icon'], $FILE_DIR, $icon);
}
}
$retval['status'] = '1';
$retval['message'] = 'file uploaded';
$retval['filename'] = $icon;
} else {
$retval['status'] = '0';
$retval['message'] = 'nothing was posted';
}
header('Content-Type: application/json');
echo json_encode($retval, JSON_UNESCAPED_UNICODE);
}
如果我通过邮递员上传文件,则后端代码将可用。
fileupload.ts
onUploadOutput(output: UploadOutput): void {
console.log(output);
if (output.type === 'allAddedToQueue') {
const event: UploadInput = {
type: 'uploadAll',
url: 'http://localhost/ezyrental/index.php/Ws/add_icon',
method: 'POST',
data: { foo: 'bar' }
};
this.uploadInput.emit(event);
} else if (
output.type === 'addedToQueue' &&
typeof output.file !== 'undefined'
) {
// add file to array when added
this.files.push(output.file);
} else if (
output.type === 'uploading' &&
typeof output.file !== 'undefined'
) {
// update current data in files array for uploading file
const index = this.files.findIndex(
file => typeof output.file !== 'undefined' && file.id === output.file.id
);
this.files[index] = output.file;
} else if (output.type === 'removed') {
// remove file from array when removed
this.files = this.files.filter(
(file: UploadFile) => file !== output.file
);
} else if (output.type === 'dragOver') {
this.dragOver = true;
} else if (output.type === 'dragOut') {
this.dragOver = false;
} else if (output.type === 'drop') {
this.dragOver = false;
}
}
前端部分返回成功消息,但没有上传文件,我认为问题在于发送格式错误的数据,也许这就是为什么Web服务通过邮递员工作的原因。如何使用ngxuploader格式化数据