如何在angular中发送curl请求

Question

我有以下curl请求使用邮差，我想在angular中创建一个http请求做同样的事情

curl --location --request POST 'http://api.deepai.org/api/fast-style-transfer' 
--header 'api-key: myKey' 
--form 'content="https://www.dmarge.com/cdn-cgi/image/width=1200,quality=85,fit=scale-down,format=auto/https://www.dmarge.com/wp-content/uploads/2021/01/dwayne-the-rock-.jpg"' 
--form 'style="https://images.fineartamerica.com/images/artworkimages/mediumlarge/3/starry-night-print-by-vincent-van-gogh-vincent-van-gogh.jpg"'

这是我到目前为止，但我得到错误

constructor(private http: HttpClient) {}
ngOnInit() {}
async style(){
const url = 'http://api.deepai.org/api/fast-style-transfer';
const headers = new HttpHeaders()
.set('api-key', 'myKey');
const resp = await this.http.post(url, { content: 'https://www.dmarge.com/cdn-cgi/image/width=1200,quality=85,fit=scale-down,format=auto/https://www.dmarge.com/wp-content/uploads/2021/01/dwayne-the-rock-.jpg',
style: 'https://images.fineartamerica.com/images/artworkimages/mediumlarge/3/starry-night-print-by-vincent-van-gogh-vincent-van-gogh.jpg'}, {
headers
}).toPromise().then();
console.log(resp);
}

错误:

xhrposttp://api.deepai.org/api/fast-style-transfer [HTTP/1.1 400错误请求1993ms]

gettp://localhost:8100/undefined [HTTP/1.1 404 Not Found 28ms]

ERROR ERROR: Uncaught (in promise): HttpErrorResponse: {"headers":{"normalizedNames":{}，"lazyUpdate":null}，"status":400，"statusText"; "Bad Request"，"url";http://api.deepai.org/api/fast-style-transfer"，"ok":false，"name":"HttpErrorResponse"，"message":"Http http://api.deepai.org/api/fast-style-transfer:失败响应400坏Request"error"{"err"从Request&quot错误处理给定的输入;}}

Answer 1

POST请求正文预计是JSON格式，因此尝试构建一个FormData对象，如下面的代码片段所示。

同时，将报头设置为接受JSON格式的数据

async style() {
const url = 'http://api.deepai.org/api/fast-style-transfer';
const headers = new HttpHeaders()
.set('accept', 'application/json')
.set('api-key', 'myKey');
let requestBody = new FormData();
requestBody.append('content', 'https://www.dmarge.com/cdn-cgi/image/width=1200,quality=85,fit=scale-down,format=auto/https://www.dmarge.com/wp-content/uploads/2021/01/dwayne-the-rock-.jpg');
requestBody.append('style', 'https://images.fineartamerica.com/images/artworkimages/mediumlarge/3/starry-night-print-by-vincent-van-gogh-vincent-van-gogh.jpg');
const resp = await this.http.post(url, requestBody, {
headers: headers
}).toPromise().then();
console.log(resp);
}