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

Posted 2023-03-04

【中文标题】如何使用 django rest 框架和 angular 上传图片？

【英文标题】：How to upload image using django rest framework and angular?

【发布时间】：2019-07-01 05:50:24

【问题描述】：

我正在做一个项目，我使用 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));

【参考方案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')

【讨论】：

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

恭喜！

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 = '仅支持图像。';返回;常量阅读器：FileReader = new FileReader(); reader.readAsDataURL(event.target.files[0]); reader.onload = (_event) => this.url = reader.result; ;