Question

我使用角度6和节点8，并尝试创建一种通过表单上载图像的机制。

所以，这是我的反应形式

<form [formGroup]="imageUpload" (ngSubmit)="imageUploadSubmitted()" enctype="multipart/form-data" > 
  <input type="file" formControlName="imageInput" required #imageInput id="imageInput" name = 'image' (change)='imageChange($event)' accept=".png, .jpg, .jpeg, .gif" > 
  <input type="text" formControlName="imageName" required>
  <button type="submit" >Submit</button>  
</form>

每次选择图像时，都将该图像文件保存在File type变量中

      selectedFile:File=null;
      imageChange(e){        
        this.selectedFile = e.target.files[0];
      }

然后将表单数据发送到服务

  imageUploadSubmitted(){
    let input = this.imageUpload.controls.imageInput as any;        
    input.value = this.selectedFile;  
    this.myService.uploadImage(this.imageUpload.value).subscribe((data) =>{
      if(data.success){                  
        alert('all good');
      }
      else{
        alert('nope');
      }
    })
  }

这是服务

  uploadImage(data){
    let headers = new Headers();
    headers.append('Content-Type','multipart/form-data');
    headers.append('Authorization',this.user_token);
    return this.http.post('http://localhost:3000/cms/upload/image', data  ,{headers:headers}  ).pipe(map(res => res.json()));  
  }

因此，我在HTML部分中有enctype="multipart/form-data"，在发送前我还在服务中附加了'Content-Type','multipart/form-data'。

在console.log('FILES - ',req.body);节点上，没有文件，它是空的。我还收到一条错误消息Error: bad content-type header, no multipart boundary。

我还尝试删除了enctype="multipart/form-data" HTML部分或'Content-Type','multipart/form-data'服务部分，以防万一自动设置了正确的类型，但是没有运气。

关于如何解决此问题的任何建议，这样我就可以在node中获得文件了？

谢谢

Answer 1

内容类型会自动添加，但是您需要为图像使用coordy[4]。

FormData

这将自动为您添加正确的标题（带有边界）

如果您要添加多个表单字段，则可以执行以下操作：

let formData:FormData = new FormData();  
formData.append("imageInput", data);
this.http.post('http://localhost:3000/cms/upload/image', formData);

传递表单元素，并且

(ngSubmit)="imageUploadSubmitted($event.target)"

还要创建具有字段的imageUploadSubmitted(form){ let formData = new FormData(form);实例

设置正确的内容类型以按角度/节点上传图像

1 个答案: