如何将文件参数发送到角度2中的Cloudinary发布请求
问题描述:
我使用图片上传API将图像文件上传到cloudinary。 我实现它像这样,如何将文件参数发送到角度2中的Cloudinary发布请求
HTML代码
<input type="file" ng2FileSelect [uploader]="uploader"/>
<button class="btn btn-primary" (click)="uploadImages()">Upload</button>
打字稿代码
public uploader: FileUploader = new FileUploader({});
uploadImages() {
const params = this.createUploadParams();
this.upload(params)
.subscribe(data => {
console.log("response", data);
})
}
private createUploadParams() {
return {
file: this.uploader.queue[0].file,
upload_preset: env.CLOUDINARY_UPLOAD_PRESET,
pulic_id: 'PUBLIC_ID'
}
}
upload(params) {
return this.http.post(`${this.apiLink}/image/upload`, JSON.stringify(params))
.map(data => data);
}
但它给我下面的错误
"{"error":{"message":"Missing required parameter - file"}}
我使用ng2-文件上传以angular2上传文件。
答
您需要将头添加文件并上传预设直通一个FORMDATA对象,并添加到请求如下:
导入HTTP和头从@角/ HTTP:
import { Http, Headers } from '@angular/http';
更新代码上传文件:
uploadImages() {
const params = this.createUploadParams();
this.upload(params)
.subscribe(data => {
console.log('response', data);
});
}
private createUploadParams() {
let formData: FormData = new FormData();
formData.append('upload_preset', env.CLOUDINARY_UPLOAD_PRESET);
formData.append('file', this.uploader.queue[0]._file);
return formData;
}
upload(params) {
let headers = new Headers();
headers.append('X-Requested-With', 'XMLHttpRequest');
return this.http.post(`${this.apiLink}/upload`, params, {headers})
.map(data => data);
}
你可以找到使用另外的例子NG2文件上传here