如何使用Django Rest Framework和Angular上传图片？

Question

我正在开发一个项目，使用Django Rest Framework作为后端，Angular 6作为前端。我试图从Angular表单中上传图片。但是当尝试提交数据时，它显示错误["无法确定图像的类型。"]。

这是我的个人项目，我想使用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));

}

- Syed Islam

Answer 1

在Angular中，你应该像下面这样做：

模板：

这些行是表单标记的一部分。

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

时间戳：

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')

- Ali

---

提交的数据不是文件。请检查表单的编码类型。现在显示此错误。 - Syed Islam

恭喜！ - Ali

onSelectedFile(event) { this.message = ''; this.url = ''; if (event.target.files && event.target.files[0]) { const mimeType = event.target.files[0].type; if (mimeType.match(/image/*/) == null) { this.message = '仅支持图片格式。'; return; } const reader: FileReader = new FileReader(); reader.readAsDataURL(event.target.files[0]); reader.onload = (_event) => { this.url = reader.result; }; } } - Syed Islam