Angular 2 - 图片上传，文件未上传到后端(未列出错误)(Angular 2 - Image upload , File not getting uploaded to backend (no error listed))

我试图以角度2上传图像，我没有列出错误，但文件添加详细代码的位置没有变化如下

**.ts**

............

onFileChange(event) {

if(event.target.files.length > 0) {

let file = event.target.files[0];

this.fileName = file.name;

this.imageUpload['upload'] = this.fileName;

this.form.get('upload').setValue(file);

console.log(file);

console.log('filename',this.fileName);

}

private prepareSave(): any {

let inputVal = new FormData();

inputVal.append('upload', this.form.get('upload').value,this.imageUpload['upload']);

console.log(inputVal);

return inputVal;

}

onSubmit() {

this.imageUpload['upload'] = this.fileName;

const formModel = this.prepareSave();

this.loading = true;

var body = formModel;

let url = this.ImageUploadURL;

let headers = new Headers({ 'Content-Type': 'multipart/form-data' ,'Authorization': 'Bearer ' + this.accountsService.accessToken });

let options = new RequestOptions({ headers: headers });

console.log(options);

console.log(body);

console.log(url);

// In a real-world app you'd have a http request / service call here like

return this.http.post(url, body, options)

.catch(error => Observable.throw(error))

.subscribe(

data => console.log('success'),

error => console.log(error)

)

}

...............

在控制台中获得成功

该方法使用网址发布， {upload：“”}

在网络即时通讯中

可能是所需部分没有变化的错误？

还有其他方法吗？

I am trying to upload an image in angular 2 , i have no error listed but there is no change in the position the file added detailed code is given below

**.ts**

............

onFileChange(event) {

if(event.target.files.length > 0) {

let file = event.target.files[0];

this.fileName = file.name;

this.imageUpload['upload'] = this.fileName;

this.form.get('upload').setValue(file);

console.log(file);

console.log('filename',this.fileName);

}

private prepareSave(): any {

let inputVal = new FormData();

inputVal.append('upload', this.form.get('upload').value,this.imageUpload['upload']);

console.log(inputVal);

return inputVal;

}

onSubmit() {

this.imageUpload['upload'] = this.fileName;

const formModel = this.prepareSave();

this.loading = true;

var body = formModel;

let url = this.ImageUploadURL;

let headers = new Headers({ 'Content-Type': 'multipart/form-data' ,'Authorization': 'Bearer ' + this.accountsService.accessToken });

let options = new RequestOptions({ headers: headers });

console.log(options);

console.log(body);

console.log(url);

// In a real-world app you'd have a http request / service call here like

return this.http.post(url, body, options)

.catch(error => Observable.throw(error))

.subscribe(

data => console.log('success'),

error => console.log(error)

)

}

...............

in console its getting success

the method is post with url and { upload:"" }

In the network im getting

what might be the error that there is no change on desired portion?

is there any other way ?

原文：https://stackoverflow.com/questions/49461150

更新时间：2020-02-14 11:48

最满意答案

在Angular中，当使用多部分表单数据并且您正在使用FormData对象时，您不能指定Content-Type标头。

通过这样做，您正在阻止http堆栈将其设置为必须包含边界值的正确值。

只需删除内容类型标题，让格式化程序为您处理，您应该没问题。

In Angular, when using multipart form-data and you are using FormData object, you MUST NOT specifiy the Content-Type header.

By doing so you are preventing the http stack to set it to the proper value which MUST include the boundary value.

Just remove the content type header and let the formatter handle that for you, and you should be fine.

2018-03-24

php receive picture file,Angular 2 - 图片上传，文件未上传到后端（未列出错误）(Angular 2 - Image upload , File not gettin...