업로드 이미지 파일과 장고 REST API에 의해 처리 할 것입니다 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>

나는 위의 코드 구현을, 휴식을 보낼 수 있습니다. 하지만 지원되지 않는 미디어 유형 인 415 상태 코드를 보여줍니다 ...!

내가 POSTMAN을 통해 동일한 요청을 보내는 경우 허용합니다. \ -H '캐시 제어 : 노 캐시'\ -H '콘텐츠 유형 : 다중/형상 - : 이죠 컬 명령은

curl -X POST \ 

http://192.168.1.223:8010/profilepic/ \ -H'기본 OTc5Nzk3OTc5NzoxMjM = 인증 '입니다 데이터; 경계 = ---- 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 호출에 따라 다릅니다.