2017-09-09 40 views
1

上传图片文件并发送至REST API

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 [email protected]/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 '[email protected]/home/ashwini/Pictures/step4.png' --compressed 

回答

0

您的内容类型与您的curl命令和JS调用有所不同。

+0

plz检查上面的curl命令..第一个被接受,第二个不被接受 –

+1

第一个curl命令有一个auth头,但第二个没有。你在第一个中也有-F开关,但不是第二个,这意味着你在第一个而不是第二个中模拟一个表单。我不确定这是什么问题,但需要研究。 – evenflow58