单击发送按钮时,如何上传图像。现在我遇到一个问题,当您选择图像时会立即下载到服务器并且有一个api的发布请求。我使用Rails 5 for api gallery.component.ts
name: string;
uploadFile: any;
hasBaseDropZoneOver: boolean = false;
uploadedFiles: any[] = [];
options: Object = {
url: 'http://localhost:3000/galleries'
};
sizeLimit = 2000000;
handleUpload(data): void {
if (data && data.response) {
data = JSON.parse(data.response);
this.uploadFile = data;
this.name = this.uploadFile.filename;
}
}
fileOverBase(e:any):void {
this.hasBaseDropZoneOver = e;
}
beforeUpload(uploadingFile): void {
if (uploadingFile.size > this.sizeLimit) {
uploadingFile.setAbort();
alert('File is too large');
}
}
shop.component.ts
id : number;
owner_id :number;
submit(user){
user.owner_id= this.authTokenService.currentUserData.id;
this.httpService.postData(user)
.subscribe((data) => {this.receivedUser=data; this.done=true;this.router.navigate(['/profile'])});
}
ngOnInit() {
this.getUserShops(this.authTokenService.currentUserData.id)
.subscribe((ownerShops) => {
if (ownerShops.length > 0) {
// User has at least 1 shop
this.router.navigate(['/profile'])
console.log(ownerShops.id);
} else {
// User has no shops
}
})
}
shop.component.html
名称 <div class="form-group">
<label>About</label>
<input class="form-control" type="text" name="about" [(ngModel)]="user.about" />
</div>
<div class="form-group">
<label>opening</label>
<input class="form-control" type="text" name="opening" [(ngModel)]="user.opening" />
</div>
<div class="form-group" >
<label>closing</label>
<input class="form-control" type="text" name="closing" [(ngModel)]="user.closing" />
</div>
<app-gallery> </app-gallery>
<div class="form-group">
<button class="btn btn-default" (click)="submit(user)">Send</button>
</div>
gallery.component.html
<input type="file"
ngFileSelect
[options]="options"
(onUpload)="handleUpload($event)"
(beforeUpload)="beforeUpload($event)"
multiple>