接收照片文件并通过Angular 9将其保存在阵列中

Question

我有一张照片的地址，我想把该照片的文件放在数组中，但我遇到了问题怎么做？

我做了以下事情：

AppComponent.ts:

export class AppComponent  {
constructor(private http:HttpClient){}
files:any[]=[];
url:string="https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg"
getImage(){
this.http.get(this.url).subscribe(
res=>{
this.files.push(res);
console.log(this.files)
},
err=>{
console.log("Error");
console.log(err);
}
)
}
}

AppComponent.html：

<button class="btn" (click)="getImage()">Click Me</button>

控制台：

Error
error: {error: SyntaxError: Unexpected token � in JSON at position 0 at JSON.parse (<anonymous>) at XMLHtt…, text: "����JFIF,,���Photoshop 3.08BIM�…��-�� ���O�0��@Q@Q@Q@Q@Q@Q@Q@��"}
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure during parsing for https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg"
name: "HttpErrorResponse"
ok: false
status: 200
statusText: "OK"
url: "https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg"

我想在收到照片后将其发送到服务器，并且我需要发送照片文件，如何将照片放入文件演示中

Answer 1

如果我理解正确，您希望从服务器下载照片，然后将它们作为文件发送到另一台服务器。如果是，那么你应该将它们作为blob下载，请看到这个答案，然后将blob保存到你的数组中，然后按照你的意愿进行操作。

您的代码试图将响应读取为json，这是http调用中的标准响应，这就是错误试图说的。