问题
I am trying to send two type of files in general to server images
and zip
I've already installed
"@ionic-native/file": "^5.16.0",
"@ionic-native/file-transfer": "^5.16.0",
"cordova-plugin-file": "^6.0.2",
"cordova-plugin-file-transfer": "^1.7.1",
I also imported files classes into my component like:
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer/ngx'; import { File } from '@ionic-native/file';
constructor( // etc. private transfer: FileTransfer, private file: File ) { }
and I'm getting this warning:
Code
Here is my form in view
<form class="ion-padding" [formGroup]="distributorForm" (ngSubmit)="approveDistributor()">
<ion-row class="ion-padding">
<ion-col size="12">
<ion-input type="file" formControlName="coDoc" placeholder="Company documents"></ion-input>
<small>1- Only <kbd>Zip</kbd> files are allowed. <br> 2- Maximum size: <kbd>10 MB</kbd></small>
</ion-col>
<ion-col size="12">
<ion-button class="ion-margin-top" type="submit" expand="full" color="success" [disabled]="!distributorForm.valid">SEND</ion-button>
</ion-col>
</ion-row>
</form>
Here is my current component function without files
(This sending data to service.
approveDistributor() {
const distributorForm = this.distributorForm.value;
// tslint:disable-next-line: max-line-length
this.verifyService.distributorForm(distributorForm.coDoc).subscribe(
data => {
this.alertService.presentToast('Sent successfully.');
},
error => {
this.alertService.presentToast(error['message']);
},
() => {
this.Mainstorage.ready().then(() => {
this.Mainstorage.get('token').then(
data => {
this.alertService.presentToast('Your data is in process after approve you\'ll be able to work with software.');
},
error => {
console.log(error);
}
);
});
}
);
}
Here is my service function (This sends data to server)
distributorForm(
coDoc: String
) {
const headers = new HttpHeaders({
Authorization : this.token.token_type + " " + this.token.access_token,
Accept: 'application/json, text/plain',
'Content-Type': 'application/json'
});
return this.http.post(this.env.companyDocs,
{
coDoc
}, { headers }
);
}
Questions
- Should I concern about warning I get for FileTransfer? If so how to solve it?
- How to get my files correct path in order to send them to server?
Update
I have changed my function to use formData
like:
const distributorForm = this.distributorForm.value; //my original line
//added lines
const formData: FormData = new FormData();
formData.append('coDoc', distributorForm);
console.log(formData); // this returns empty array under formData in console.
// tslint:disable-next-line: max-line-length
this.verifyService.distributorForm(formData).subscribe(
...
);
even with formData
I cannot send the file to server.
回答1:
saveComp() {
var value: File = file;//get file from input
this.customService.saveFile(value)
.subscribe((data: any) => {
// do some stuff
}, (error: any) => console.log(error))
return;
}
saveFile(file: File): any {
const formData: FormData = new FormData();
var url="your url";
//example url= "http://localhost:9090/"+ 'api/CrmLead/CreateFollowUpByExcel';
formData.append('FollowUpFile', file, file.name);
return this._http.post(url, formData, this.requestOptions)
.catch(this.errorHandler);
}
requestOptions = {
headers: new HttpHeaders({
'Authorization': 'Bearer ' + token,
})
};
In ApiController C#
var httpRequest = _httpContextAccessor.HttpContext.Request;
var postedFile = httpRequest.Form.Files["FollowUpFile"];
string path = null;
if (postedFile != null)
{
// do some stuff with file
}
来源:https://stackoverflow.com/questions/58810477/angular-send-files-to-server