如何提交输入数据以及 ng2 文件上传 angular ionic
how to submit input data along with ng2 file upload angular ionic
我想在 angular ionic 中发送一些带有文件上传(ng2 文件上传)的文本数据。我也是 angular 和 ionic 的新手。我尝试了很多选择,但我似乎没有出路。我正在使用 Php 作为 backend.I 我只能发送文件但不能发送用户名等输入数据。同时,我能够在控制台上记录用户名的输入数据,但服务器响应为空。而且它永远不会插入我的数据库。这是我的代码。
public fileUploader: FileUploader = new FileUploader({});
ngOnInit() {
this.fileUploader = new FileUploader({ url: "http://localhost/paat/server/post.php"});
this.fileUploader.onBuildItemForm = (fileItem: any, form: FormData): any => {
form.append('body', this.body);
form.append('username', this.username);
// Add file to upload
form.append('file', fileItem);
fileItem.withCredentials = false;
return { fileItem, form };
};
}
fileOverBase(event): void {
this.hasBaseDropZoneOver = event;
}
//return files from ng2 upload
getFiles(): FileLikeObject[] {
return this.fileUploader.queue.map((fileItem) => {
return fileItem.file;
});
}
// the upload method where the post to server is made
uploadFiles() {
let bodys = {
body:this.body,
username:this.username,
};
let files = this.getFiles();
let requests = [];
files.forEach((file) => {
let formData = new FormData();
formData.append('file' , file.rawFile, file.name);
formData.append('body' , this.body);
formData.append('username' , this.username);
requests.push(this.uploadingService.uploadFormData(formData));
});
concat(...requests).subscribe(
(res) => {
console.log(res);
console.log(this.body);
console.log(this.username);
console.log(this.file.name);
},
(err) => {
console.log(err);
}
);
}
这是我的uploadservice.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class UploadingService {
API_SERVER: string = "http://localhost/paat/server/post.php";
constructor(private http: HttpClient) { }
public uploadFormData(formData) {
return this.http.post<any>(`${this.API_SERVER}`, formData);
}
}
这是我的后端代码:
<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
header("Access-Control-Allow-Methods:POST,GET,PUT,DELETE");
header("Access-Control-Max-Age:86400");
header("Access-Control-Allow-Headers: Content-Type,Access-Control-Allow-Headers,Authorization,X-Requested-With");
$con = mysqli_connect("localhost", "root", "", "social");
$postjson = json_decode(file_get_contents('php://input'), true);
$filename = $_FILES['file']['name'];
$meta = $_POST;
$targetDir = "assets/images/posts/";
$destination = $targetDir . $filename;
move_uploaded_file( $_FILES['file']['tmp_name'] , $destination );
$body = $postjson['body'];
$date_added = date("Y-m-d H:i:s");
//get username
$added_by = $postjson['username'];
//if user is on own profile, user_to is 'none'
$targetfile = $destination;
$user_to ="none";
$query = mysqli_query($con,"INSERT INTO posts VALUES(NULL, '$body', '$added_by', '$user_to', '$date_added', 'no', 'no', '0', '$targetfile')");
我做错了什么?请帮忙。
我发现我做错了什么。问题出在我的后端代码上。这是我从请求中检索表单数据值的方式。所以我改变了
$body = $postjson['body'];
$added_by = $postjson['username'];
到
$body = $_POST['body'];
$added_by = $_POST['username'];
我还修改了 ngOnInit() 方法和 fileuploader 方法的实例
public fileUploader: FileUploader = new FileUploader({ url: "http://localhost/paat/server/post.php"});
ngOnInit() {
this.fileUploader.onBuildItemForm = (fileItem: any, form: FormData): any => {
form.append('body', this.body);
// Add file to upload
form.append('file', fileItem);
form.append('username', this.username);
fileItem.withCredentials = false;
return { fileItem, form };
};
}
现在可以使用了。
我想在 angular ionic 中发送一些带有文件上传(ng2 文件上传)的文本数据。我也是 angular 和 ionic 的新手。我尝试了很多选择,但我似乎没有出路。我正在使用 Php 作为 backend.I 我只能发送文件但不能发送用户名等输入数据。同时,我能够在控制台上记录用户名的输入数据,但服务器响应为空。而且它永远不会插入我的数据库。这是我的代码。
public fileUploader: FileUploader = new FileUploader({});
ngOnInit() {
this.fileUploader = new FileUploader({ url: "http://localhost/paat/server/post.php"});
this.fileUploader.onBuildItemForm = (fileItem: any, form: FormData): any => {
form.append('body', this.body);
form.append('username', this.username);
// Add file to upload
form.append('file', fileItem);
fileItem.withCredentials = false;
return { fileItem, form };
};
}
fileOverBase(event): void {
this.hasBaseDropZoneOver = event;
}
//return files from ng2 upload
getFiles(): FileLikeObject[] {
return this.fileUploader.queue.map((fileItem) => {
return fileItem.file;
});
}
// the upload method where the post to server is made
uploadFiles() {
let bodys = {
body:this.body,
username:this.username,
};
let files = this.getFiles();
let requests = [];
files.forEach((file) => {
let formData = new FormData();
formData.append('file' , file.rawFile, file.name);
formData.append('body' , this.body);
formData.append('username' , this.username);
requests.push(this.uploadingService.uploadFormData(formData));
});
concat(...requests).subscribe(
(res) => {
console.log(res);
console.log(this.body);
console.log(this.username);
console.log(this.file.name);
},
(err) => {
console.log(err);
}
);
}
这是我的uploadservice.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class UploadingService {
API_SERVER: string = "http://localhost/paat/server/post.php";
constructor(private http: HttpClient) { }
public uploadFormData(formData) {
return this.http.post<any>(`${this.API_SERVER}`, formData);
}
}
这是我的后端代码:
<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
header("Access-Control-Allow-Methods:POST,GET,PUT,DELETE");
header("Access-Control-Max-Age:86400");
header("Access-Control-Allow-Headers: Content-Type,Access-Control-Allow-Headers,Authorization,X-Requested-With");
$con = mysqli_connect("localhost", "root", "", "social");
$postjson = json_decode(file_get_contents('php://input'), true);
$filename = $_FILES['file']['name'];
$meta = $_POST;
$targetDir = "assets/images/posts/";
$destination = $targetDir . $filename;
move_uploaded_file( $_FILES['file']['tmp_name'] , $destination );
$body = $postjson['body'];
$date_added = date("Y-m-d H:i:s");
//get username
$added_by = $postjson['username'];
//if user is on own profile, user_to is 'none'
$targetfile = $destination;
$user_to ="none";
$query = mysqli_query($con,"INSERT INTO posts VALUES(NULL, '$body', '$added_by', '$user_to', '$date_added', 'no', 'no', '0', '$targetfile')");
我做错了什么?请帮忙。
我发现我做错了什么。问题出在我的后端代码上。这是我从请求中检索表单数据值的方式。所以我改变了
$body = $postjson['body'];
$added_by = $postjson['username'];
到
$body = $_POST['body'];
$added_by = $_POST['username'];
我还修改了 ngOnInit() 方法和 fileuploader 方法的实例
public fileUploader: FileUploader = new FileUploader({ url: "http://localhost/paat/server/post.php"});
ngOnInit() {
this.fileUploader.onBuildItemForm = (fileItem: any, form: FormData): any => {
form.append('body', this.body);
// Add file to upload
form.append('file', fileItem);
form.append('username', this.username);
fileItem.withCredentials = false;
return { fileItem, form };
};
}
现在可以使用了。