如何在 Angular 2 中上传图片发布方法？

Question

HTML

 <form #productForm="ngForm" ngSubmit)="createNewProduct(productForm)">
   <div class="form-group ">
      <input   type="file" [(ngModel)]="model.files" name="files" #files="ngModel" class="form-control"  id="files"  multiple="">
        </div>
        <div class="form-group ">
            <label for="productname">Name</label>          
             <input type="text" class="form-control" id="productname" required minlength="5" pattern="^[a-zA-Z0-9/,-. ]*$" maxlength="30"  [(ngModel)]="model.productname" name="productname" #productname="ngModel">
        </div>
        <div class="form-group ">
           <label for="sales">Sales price/rate</label>
           <input type="text" class="form-control" id="sales" pattern="[0-9]+" required minlength="0" maxlength="10"  [(ngModel)]="model.sales" name="sales" #sales="ngModel">
       </div>

提交

component.ts

    createNewProduct(productForm: NgForm) {      
         this.productService.save_user(json).subscribe(response => console.log('Inserted Successfully'),
      error => console.log(error));
  }

service.ts

  save_user(product_data: any): Observable<any[]> {
    const httpOptions = {
        headers: new HttpHeaders({
            'Content-Type': 'application/json',
        }),
    };
    return this.http.post('http://localhost:8000/product/', product_data, httpOptions)
        .map(response => response)
        .catch(error => Observable.throw(error.statusText));
};

这里我提到了我的 component.ts 和 service.ts，以及我的 Html。我不知道如何上传图片。

Answer 1

试试这个。在您的服务方法中创建一个新的 formData 对象并将您的文件附加到它。然后您可以使用 http.post 方法将其发送到后端。

public uploadFile(file: File, otherData: any): Observable<any> {

  let formData:FormData = new FormData();  
  formData.append('document',file);
  formData.append('name',otherData.name);
  formData.append('age',otherData.name);  

  return this.http.post("/your/url",formData)  
            .map((response: Response) => {  
              return response;                 
            });
}