允许通过 Django admin 将 SVG 文件上传到 ImageField

Question

我正在改用 SVG 图像来表示我的电子商务平台上的类别。我之前在 Category 模型中使用 models.ImageField 来存储图像，但 forms.ImageField 验证无法处理基于矢量的图像（因此拒绝它）。

我不需要对有害文件进行彻底验证，因为所有上传都将通过 Django Admin 完成。看起来我必须在我的模型中切换到 models.FileField，但我确实想要警告上传无效图像。

Nick Khlestov 在django-rest-framework's ImageField 上写了一个SVGAndImageFormField（在文章中找到来源，我没有足够的声誉来发布更多链接）。如何在 Django 的 ImageField（而不是 DRF 的）上使用此解决方案？

Answer 1

我从未使用过SVGAndImageFormField，所以我无法对此发表评论。我个人会选择FileField 的简单应用程序，但这显然取决于项目要求。我将在下面展开：

正如评论中提到的，ImageField 和 FileField 的基本区别在于首先使用 Pillow 检查文件是否为图像：

从 FileField 继承所有属性和方法，但也验证上传的对象是有效的图像。

参考：Django docs，Django source code

它还提供了一些可能与 SVG 情况无关的属性（高度、宽度）。

因此，模型字段可以是：

    svg = models.FileField(upload_to=..., validators=[validate_svg])

您可以使用相关问题中提供的 is_svg 之类的函数：

How can I say a file is SVG without using a magic number?

然后是一个验证 SVG 的函数：

def validate_svg(file, valid):
    if not is_svg(file):
        raise ValidationError("File not svg")

Answer 2

事实证明，SVGAndImageFormField 对 DRF 的 ImageField 没有依赖关系，它只是添加到由 django.forms.ImageField 完成的验证。

为了在 Django Admin 中接受 SVG，我将模型的 ImageField 更改为 FileField 并指定了如下覆盖：

class MyModelForm(forms.ModelForm):
    class Meta:
        model = MyModel
        exclude = []
        field_classes = {
            'image_field': SVGAndImageFormField,
        }

class MyModelAdmin(admin.ModelAdmin):
    form = MyModelForm

admin.site.register(MyModel, MyModelAdmin)

它现在接受所有以前的图像格式以及 SVG。

编辑：刚刚发现即使您不从models.ImageField 切换到models.FileField，这也有效。 models.ImageField 的 height 和 width 属性仍适用于光栅图像类型，对于 SVG 将设置为 None。

Answer 3

这是一个作为简单模型字段工作的解决方案，您可以用它代替models.ImageField：

class Icon(models.Model):
    image_file = SVGAndImageField()

您需要在代码中的某处定义以下类和函数：

from django.db import models

class SVGAndImageField(models.ImageField):
    def formfield(self, **kwargs):
        defaults = {'form_class': SVGAndImageFieldForm}
        defaults.update(kwargs)
        return super().formfield(**defaults)

下面是SVGAndImageFieldForm 的样子：

from django import forms
from django.core.exceptions import ValidationError

class SVGAndImageFieldForm(forms.ImageField):
    def to_python(self, data):
        try:
            f = super().to_python(data)
        except ValidationError:
            return validate_svg(data)

        return f

函数validate_svg我取自其他解决方案：

import xml.etree.cElementTree as et

def validate_svg(f):
    # Find "start" word in file and get "tag" from there
    f.seek(0)
    tag = None
    try:
        for event, el in et.iterparse(f, ('start',)):
            tag = el.tag
            break
    except et.ParseError:
        pass

    # Check that this "tag" is correct
    if tag != '{http://www.w3.org/2000/svg}svg':
        raise ValidationError('Uploaded file is not an image or SVG file.')

    # Do not forget to "reset" file
    f.seek(0)

    return f

---

此外，如果您只想使用 SVG 文件 模型字段 - 您可以做得更简单。

只需创建类，继承自models.FileField，并在__init__方法中添加validate_svg函数到kwargs['validators']。

或者只是将这个验证器添加到models.FileField 并且很高兴:)

Answer 4

如 cmets 中所述，SVGAndImageFormField 的验证将失败，因为使用 django.core.validators.validate_image_file_extension 检查扩展，这是 ImageField 的默认验证器。

解决方法是创建一个自定义验证器，将 "svg" 添加到接受的扩展中。

已编辑：感谢@Ilya Semenov 的评论

from django.core.validators import (
    get_available_image_extensions,
    FileExtensionValidator,
)


def validate_image_and_svg_file_extension(value):
    allowed_extensions = get_available_image_extensions() + ["svg"]
    return FileExtensionValidator(allowed_extensions=allowed_extensions)(value)

然后，覆盖SvgAndImageFormField 中的default_validators 属性：

class SVGAndImageFormField(DjangoImageField):
    default_validators = [validate_image_and_svg_file_extension]
# ...

Answer 5

from django.forms import ModelForm, FileField

class TemplatesModelForm(ModelForm):
    class Meta:
        model = Templates
        exclude = []
        field_classes = {
            'image': FileField,
        }

@admin.register(Templates)
class TemplatesAdmin(admin.ModelAdmin):
    form = TemplatesModelForm

它的工作