上傳圖片文件併發送至REST API

Question

import { Component } from '@angular/core'; 
 
import { Http, RequestOptions, Headers, Response } from '@angular/http'; 
 
import { Observable } from 'rxjs/Rx'; 
 
@Component({ 
 
selector: 'my-app', 
 
templateUrl: './app/app.component.html', 
 
styleUrls: ['./app/styles/styles.css'] 
 
}) 
 
export class AppComponent { 
 
private isUploadBtn: boolean = true; 
 
constructor(private http: Http) { 
 
} 
 
//file upload event 
 
fileChange(event) { 
 
debugger; 
 
let fileList: FileList = event.target.files; 
 
if (fileList.length > 0) { 
 
let file: File = fileList[0]; 
 
let formData: FormData = new FormData(); 
 
formData.append('uploadFile', file, file.name); 
 
let headers = new Headers() 
 
headers.append('Content-Type', 'json'); 
 
headers.append('Accept', 'application/json'); 
 
let options = new RequestOptions({ headers: headers }); 
 
let apiUrl1 = "/api/UploadFileApi"; 
 
this.http.post(apiUrl1, formData, options) 
 
.map(res => res.json()) 
 
.catch(error => Observable.throw(error)) 
 
.subscribe( 
 
data => console.log('success'), 
 
error => console.log(error) 
 
) 
 
} 
 
window.location.reload(); 
 
} 
 
}

<div class="fileUpload btn btn-primary" *ngIf="isUploadBtn"> 
 
<span>Upload</span> 
 
<input type="file" id="btnUpload" value="Upload" (change)="fileChange($event)" class="upload" /> 
 
</div>

我在上面的代碼中實現，這是Django的REST API處理。但它顯示415狀態代碼是不支持的媒體類型...！

當我通過POSTMAN發送相同的請求時它接受。 郵差捲曲命令是

curl -X POST \ 

http://192.168.1.223:8010/profilepic/ \ -H '授權：基本OTc5Nzk3OTc5NzoxMjM =' \ -H '緩存控制：無緩存' \ -H「內容 - 類型：多部分/形狀配合數據;邊界= ---- WebKitFormBoundary7MA4YWxkTrZu0gW」 \ -H '郵遞員令牌：0e6c2353-5a24-2223-d4f3-b8d74c334a3d' \ -F datafile=@/home/ashwini/Pictures/step4.png

我捲曲命令是

curl 'http://192.168.1.223:8010/profilepic/' -H 'Origin: http://192.168.1.144:4200' -H 'Accept-Encoding: gzip, deflate' -H 'Accept-Language: en-GB,en-US;q=0.8,en;q=0.6' -H 'User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36' -H 'Content-Type: multipart/form-data; boundary=AaB03x' -H 'Accept: application/json, text/plain, */*' -H 'Referer: http://192.168.1.144:4200/' -H 'Connection: keep-alive' --data-binary 'datafile=@/home/ashwini/Pictures/step4.png' --compressed 

Answer 1

您的內容類型與您的curl命令和JS調用有所不同。