Angular 文件上传后显示 REST 响应
Angular displaying REST Response after file upload
我有一个 angular 应用程序,我想上传一个文件并根据上传的文件显示一个字符串。
我对 Rest API 进行了 post 调用,此 API returns 响应,我想显示此响应的内容。但是出了点问题,因为我可以 console.log
响应的内容,但我无法正常 显示它 (即作为标签或类似内容)。
谁能告诉我该怎么做?
这里是component.html
<div>
<label class="image-upload-container btn btn-bwm">
<span>Select Image</span>
<input #imageInput type="file" accept="image/*" (change)="processFile(imageInput)">
</label>
<!--IT DOES NOT WORK Displays [object Object] -->
<input type=text name="prediction" [(ngModel)]="prediction" />
<!--IT DOES NOT WORK Displays [object Object] -->
{{prediction}}
</div>
这里是component.ts
import { Component, OnInit } from '@angular/core';
import { ImageService } from '../../services/image.service';
class ImageSnippet {
constructor(public src: string, public file: File) { }
}
@Component({
selector: 'app-image',
templateUrl: './image.component.html',
styleUrls: ['./image.component.css']
})
export class ImageComponent implements OnInit {
constructor(private imageService: ImageService) { }
prediction!: String;
ngOnInit(): void {
}
processFile(imageInput: any) {
const file: File = imageInput.files[0];
const reader = new FileReader();
reader.addEventListener('load', (event: any) => {
let selectedFile = new ImageSnippet(event.target.result, file);
this.imageService.uploadImage(selectedFile.file).subscribe(
(response) => {
this.prediction = response.toString();// IT DOES NOT WORK Displays [object Object]
// console.log() WORKS: it logs something like this: {prediction: "jeges, tensor([0.0530, 0.0999, 0.8471])"}
//which is the exact string that I want to display
console.log(response)
}
});
reader.readAsDataURL(file);
}
}
这里是service.ts
...
uploadImage(imageFile: File): Observable<Response> {
const formData = new FormData();
formData.append('imageFile', imageFile);
return this.http_client.post<Response>(this.url, formData);
}
...
这里是 API:
@app.route('/api/image-upload', methods=['POST'])
def call_predict():
imageFile = request.files['imageFile']
prediction = makePrediction(imageFile)
resp = make_response({"prediction": prediction}, 200)
resp.headers['Access-Control-Allow-Origin'] = '*'
return resp
您的 response
上有一个 toString()
调用,导致显示 string
。因此,让我们首先修复您的文件处理函数:
因此,首先像这样修复您的服务请求处理程序
this.imageService.uploadImage(selectedFile.file).subscribe(
(response) => {
this.prediction = response;
}
});
因此此更改会导致您的 HTML 出现问题,因此我们需要对其进行调整,因为 this.prediction
不是 string
<div>
<label class="image-upload-container btn btn-bwm">
<span>Select Image</span>
<input #imageInput type="file" accept="image/*" (change)="processFile(imageInput)">
</label>
<!-- here we'll bind according to the structure you gave in your code -->
<input type=text name="prediction" [(ngModel)]="prediction.prediction"/>
<!-- Since we have an object we cant just dump it here, so lets use a json pipe -->
{{prediction | json}}
</div>
最后,您 class 中的成员 prediction
必须键入 Response
prediction!: Response;
所以我认为这应该可行,试试吧...
我有一个 angular 应用程序,我想上传一个文件并根据上传的文件显示一个字符串。
我对 Rest API 进行了 post 调用,此 API returns 响应,我想显示此响应的内容。但是出了点问题,因为我可以 console.log
响应的内容,但我无法正常 显示它 (即作为标签或类似内容)。
谁能告诉我该怎么做?
这里是component.html
<div>
<label class="image-upload-container btn btn-bwm">
<span>Select Image</span>
<input #imageInput type="file" accept="image/*" (change)="processFile(imageInput)">
</label>
<!--IT DOES NOT WORK Displays [object Object] -->
<input type=text name="prediction" [(ngModel)]="prediction" />
<!--IT DOES NOT WORK Displays [object Object] -->
{{prediction}}
</div>
这里是component.ts
import { Component, OnInit } from '@angular/core';
import { ImageService } from '../../services/image.service';
class ImageSnippet {
constructor(public src: string, public file: File) { }
}
@Component({
selector: 'app-image',
templateUrl: './image.component.html',
styleUrls: ['./image.component.css']
})
export class ImageComponent implements OnInit {
constructor(private imageService: ImageService) { }
prediction!: String;
ngOnInit(): void {
}
processFile(imageInput: any) {
const file: File = imageInput.files[0];
const reader = new FileReader();
reader.addEventListener('load', (event: any) => {
let selectedFile = new ImageSnippet(event.target.result, file);
this.imageService.uploadImage(selectedFile.file).subscribe(
(response) => {
this.prediction = response.toString();// IT DOES NOT WORK Displays [object Object]
// console.log() WORKS: it logs something like this: {prediction: "jeges, tensor([0.0530, 0.0999, 0.8471])"}
//which is the exact string that I want to display
console.log(response)
}
});
reader.readAsDataURL(file);
}
}
这里是service.ts
...
uploadImage(imageFile: File): Observable<Response> {
const formData = new FormData();
formData.append('imageFile', imageFile);
return this.http_client.post<Response>(this.url, formData);
}
...
这里是 API:
@app.route('/api/image-upload', methods=['POST'])
def call_predict():
imageFile = request.files['imageFile']
prediction = makePrediction(imageFile)
resp = make_response({"prediction": prediction}, 200)
resp.headers['Access-Control-Allow-Origin'] = '*'
return resp
您的 response
上有一个 toString()
调用,导致显示 string
。因此,让我们首先修复您的文件处理函数:
因此,首先像这样修复您的服务请求处理程序
this.imageService.uploadImage(selectedFile.file).subscribe(
(response) => {
this.prediction = response;
}
});
因此此更改会导致您的 HTML 出现问题,因此我们需要对其进行调整,因为 this.prediction
不是 string
<div>
<label class="image-upload-container btn btn-bwm">
<span>Select Image</span>
<input #imageInput type="file" accept="image/*" (change)="processFile(imageInput)">
</label>
<!-- here we'll bind according to the structure you gave in your code -->
<input type=text name="prediction" [(ngModel)]="prediction.prediction"/>
<!-- Since we have an object we cant just dump it here, so lets use a json pipe -->
{{prediction | json}}
</div>
最后,您 class 中的成员 prediction
必须键入 Response
prediction!: Response;
所以我认为这应该可行,试试吧...