如何使用 django rest 框架和 angular 上传图片？

Question

我正在做一个项目，我使用 django rest 框架作为后端，使用 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"

序列化器.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

在角度你应该这样做：

模板：

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

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