Как загрузить изображение с помощью django rest framework и angular?

Question

Я работаю над проектом, в котором я использую django rest framework в качестве бэкэнда и angular 6 в качестве внешнего интерфейса.Я пытаюсь загрузить изображение из угловой формы.но он показывает ошибку [«Тип изображения не может быть определен.»] при попытке опубликовать данные.

Это для моего личного проекта, который я хочу разработать с использованием DRF, Angular и MySQL.

models.py

from django.db import models
from datetime import datetime


class Category(models.Model):
  cat_name = models.CharField(max_length=200)
  parent_cat_id = models.IntegerField()
  description = models.TextField()
  cat_image = models.ImageField(upload_to='images/%Y/%m/%d/')
  active = models.BooleanField()
  create_date = models.DateTimeField(default=datetime.now)

 def __str__(self):
    return self.cat_name

 class Meta:
    db_table = "category"

serializers.py

from drf_extra_fields.fields import Base64ImageField
from rest_framework import serializers

from .models import Category


class CategorySerializer(serializers.ModelSerializer):
  cat_image = Base64ImageField()

  class Meta:
    model = Category
    fields = ('id', 'cat_name', 'description', 'parent_cat_id', 'cat_image', 'active')

category.service.ts

createCategories(category) {
return this.http.post(this.globalService.baseUrl + 'Category/', 
category).subscribe(res => console.log('saved', res));

}

Answer 1

* В угловом выражении * 1000 вы должны сделать следующее:

шаблон:

Эти строки являются частью тега формы.

<div class="mb-3">
    <label>Logo (optional):</label>
    <input type="file"
     id="logo"
     name="logo"
     (change)="handleFileInput($event.target.files)">
  </div>

ts:

handleFileInput(files: FileList) {
let fileItem = files.item(0);
let fileNameArr = fileItem.name.split('.');

if(fileNameArr[1] == 'jpg' || fileNameArr[1] == 'JPG' || fileNameArr[1] == 'png' || fileNameArr[1] == 'PNG'){

  this.errorMessage = '';
  this.fileToUpload = fileItem;

}else{
  this.errorMessage = 'logo should be in jpg or png format';
  this.fileToUpload = null;
}

функция, которая вызывает API-сервис:

signUpForm(form: NgForm){



let newUser = {
  full_name: form.value.full_name,
  facility_name: form.value.facility_name,
};



let formData: FormData = new FormData();

// logo file is optional
if(this.fileToUpload)
  formData.append('logo_company', this.fileToUpload, this.fileToUpload.name);

for(let key in newUser){
  formData.append(key, newUser[key]);
}

//call membership service for sign up
this.membershipService.registerUser(formData).subscribe(
  (data: any) => {
    // this.spinnerService.hide();
    this.isDisplaySpinner = false;
    window.alert('You signed up to web site successfully.\nAn activation link sent to your email. Refer to your email please and click on it.');
    this.router.navigate(['/']);
  },
  (error: any) => {
    // this.spinnerService.hide();
    this.isDisplaySpinner = false;

    if(error.email)
      this.errorMessage = error.email;
    else
      this.errorMessage = error;
  }
);

}

В классе сериализатора не определяют cat_image,

class CategorySerializer(serializers.ModelSerializer):

    class Meta:
        model = Category
        fields = ('id', 'cat_name', 'description', 'parent_cat_id', 'cat_image', 'active')