代码之家 › 专栏 › 技术社区 › Sudharsan Venkatraj

如何在Angular2中发布图像?

angular2-directives angular2-services angular2-forms angular2-template angular

-1

Sudharsan Venkatraj · 技术社区 · 7 年前

实际上,我对Angular2还不熟悉。在post方法中,我不知道如何以angular2上传图像。还有其他字段,如(产品名称、类型、类别等),以及我想发布图像的字段。下面我提到了我的Html组件。ts和服务。ts。那么请告诉我怎么做?

HTML

          <div class="form-group image">
            <input type="file" (change)="onfileSelected($event)" class="form-control" multiple="">
            <span style="padding-left:22%">
              <a href="#">
                <i class="fa fa-pencil fa-lg" aria-hidden="true"></i>
              </a>&nbsp; | &nbsp;
              <a href="#">
                <i class="fa fa-trash-o fa-lg" aria-hidden="true"></i>
              </a>
            </span>
          </div>

组成部分ts

 onfileSelected(event) {
    console.log(event);
    this.selectedFile = <File>event.target.files[0];
  }



 createNewProduct(productForm: NgForm) {

    this.productService.save_user(productForm.value)
      .subscribe(response => {
        const toast_parameter = this.notificationService.getToast('success', 'New Product', 'Inserted Successfully');
        this.toastConfig = toast_parameter.config;

        this.toasterService.popAsync(toast_parameter.toast);
      },
        error => {
          const toast_parameter = this.notificationService.getToast('error', 'New Product', 'Error Occurred!!');
          this.toastConfig = toast_parameter.config;
          this.toasterService.popAsync(toast_parameter.toast);
        });

  }

服务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));
    };

模型py公司

class Product(models.Model):
    image = models.ImageField(upload_to='myphoto/%Y/%m/%d/', null=True, max_length=255)
    pro_name =  models.CharField(max_length=25)
    description = models.CharField(max_length=150)
    category = models.ForeignKey(Category,on_delete=models.CASCADE)
    sales = models.CharField(max_length=25)
    cost = models.CharField(max_length=25)
    taxable = models.BooleanField(default=False, blank=True)
    tax_details= models.CharField(max_length=250)
    type_units = models.ForeignKey(Units, on_delete=models.CASCADE)
    hsn = models.CharField(max_length=10)

序列化程序。py公司

class ProductSerializer(serializers.HyperlinkedModelSerializer):    
    image = serializers.ImageField(required=False, max_length=None, allow_empty_file=True,  use_url=True)
    class Meta:
        model = Product
        fields = ('id','image','pro_name','description','category','sales','cost','taxable','tax_details','type_units','hsn')

2 回复 | 直到 7 年前

Pardeep Jain 7 年前

要发送图像/文件,您需要以以下格式发送数据: FormData 因此,将所有数据添加到formData中,并将其发送回服务器

<input type="file" (change)="onfileSelected($event.target.files)" class="form-control" multiple="">



onfileSelected(event) {
 console.log(event);
 this.form.image = <File>event.target.files[0];
}

createNewProduct() {
  this.productService.save_user(this.setFormData(this.form.value))
    .subscribe(response => {
      const toast_parameter = this.notificationService.getToast('success', 'New Product', 'Inserted Successfully');
      this.toastConfig = toast_parameter.config;

      this.toasterService.popAsync(toast_parameter.toast);
    },
      error => {
        const toast_parameter = this.notificationService.getToast('error', 'New Product', 'Error Occurred!!');
        this.toastConfig = toast_parameter.config;
        this.toasterService.popAsync(toast_parameter.toast);
      });

}

setFormData(param) {
  let formData = new FormData();
  for (let i = 0; i < Object.keys(param).length; i++) {
    let key = Object.keys(param)[i];
    let data = param[key];
    formData.append(key, data);
  }
  return formData;
}

Robert 7 年前

您好,您可以使用http调用将插入的服务更改为 XMLHttpRequest

file:File;
onfileSelected(event: EventTarget) {
    let eventObj: MSInputMethodContext = <MSInputMethodContext> event;
    let target: HTMLInputElement = <HTMLInputElement> eventObj.target;
    let files: FileList = target.files;
    if(files) {
        this.file: File = files[0];
      }
}
public save_user(filedata: File) {
    let url = 'your url'
    if (typeof filedata != 'undefined') {
        return new Promise((resolve, reject) => {
            let formData: any = new FormData();
            let xhr = new XMLHttpRequest();
            formData.append('image', filedata, filedata.name);
            xhr.open('POST', url, true);
            xhr.send(formData);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == XMLHttpRequest.DONE) {
                    resolve(JSON.parse(xhr.responseText));
                }
            }
        });

    }
}

更新时间:

this.service.saveUser(this.file)
                .then(data=>{
                    console.lo(' image File uploaded')
                })

在后端,您可以从 要求文件

image = request.FILES['image']