Wagtail：将图像添加到自定义用户模型

Question

我正在关注 Wagtail 文档到 customize the user model。我想向用户模型添加图像。

Django 版本：2.0.8， 鹡鸰版本：2.1

问题

使用图像选择器字段选择图像并单击“保存”后，出现此错误：

'没有提交文件。检查表单上的编码类型。'

代码

models.py

from django.db import models

from django.contrib.auth.models import AbstractUser

class User(AbstractUser):
    display_image = models.ForeignKey('wagtailimages.Image', 
        null=True,
        blank=True,
        on_delete=models.SET_NULL,
        related_name='+')

forms.py

from django import forms
from django.utils.translation import ugettext_lazy as _

from wagtail.users.forms import UserEditForm, UserCreationForm
from wagtail.images.widgets import AdminImageChooser

class CustomUserEditForm(UserEditForm):
    display_image = forms.ImageField(
        widget=AdminImageChooser(), label=_('Autorenbild'))

class CustomUserCreationForm(UserCreationForm):
    display_image = forms.ImageField(
        widget=AdminImageChooser(), label=_('Autorenbild'))}

edit.html

{% extends "wagtailusers/users/edit.html" %}

{% block extra_fields %}
    {% include "wagtailadmin/shared/field_as_li.html" with field=form.display_image %}
{% endblock extra_fields %}

{% block extra_js %}
    {{ block.super }}
    {% include 'wagtailadmin/pages/_editor_js.html' %}
{% endblock extra_js %}

create.html 类似

到目前为止我所做的尝试

我找到了here 使用AdminImageChooser 小部件的想法。我必须通过添加 forms.ImageField 来调整表单，以便 User 页面正确显示。

问题

1. 有人知道错误发生的原因以及如何解决吗？

2. 如上述 Google 群组线程中所述，将图像添加到用户模型似乎“有点尴尬”。将图像连接到用户以在站点中重复使用的更好方法是什么？要求是可以在 Wagtail 管理员中轻松更改图像。

Wagtail 2.2 版的其他问题

在管理界面的设置>用户中，AdminImageChooser的窗口没有打开。

控制台显示以下 JS 错误：

未捕获的 ReferenceError：未定义 createImageChooser

Answer 1

在同一个 Google 群组线程中使用最后提出的解决方案，从 Wagtail 2.1 更新到 2.2 后也遇到了 ReferenceError: createImageChooser is not defined js 问题

这是我的研究过程：

看起来 this commit 从 _editor_js.html 中删除了直接媒体 js 包含。

好的，所以解决方案是复制旧行为，并访问Media subclasses of widgets

首先，我尝试在{% block extra_js %} 中将相同的已删除行添加到我自己的edit.html 中。不工作。

看起来有些视图返回了edit_handler，例如here。用户视图没有。

然而，用户视图在创建和编辑视图中提供的是form variable。让我们使用它。

对我来说，最终的解决方案是改变 edit.html 中的 extra_js 块，如下所示：

{% block extra_js %}
    {{ block.super }}
    {% include 'wagtailadmin/pages/_editor_js.html' %}
    {{ form.media.js }}
{% endblock extra_js %}

Answer 2

models.py

class User(AbstractUser):
first_name = models.CharField(max_length=40, blank=False)
image = models.ImageField(blank=False, null=False, upload_to='image/', default='img/user.jpg') 



def __str__(self):
    return self.username

'''在这里您也可以添加模型及其要求，您可以设置路径以记住图像文件夹将在媒体文件夹中创建的一件事..所以不要忘记在那里添加该文件夹。喜欢你觉得有用吗'''

forms.py

​​>

class UserRegistrationForm(forms.ModelForm):

  confirm_password2 = forms.CharField(widget=forms.PasswordInput,required=False)     


class Meta:
 model = User
 fields = ['first_name','username','password','confirm_password2','image']

 def clean(self):
   cleaned_data = super(UserRegistrationForm, self).clean()
   password = cleaned_data.get("password")
   confirm_password2 = cleaned_data.get("confirm_password2")
   if password != confirm_password2:
    self.add_error('confirm_password2', "Password does not match")
    return cleaned_data

'''def clean 用于密码验证，我直接添加了我想要的字段'''

views.py

​​>

def Register_view(request):
form = UserRegistrationForm()
if request.method == 'POST':
  form = UserRegistrationForm(request.POST, request.FILES)
  if form.is_valid():
        user = form.save(commit=False)
        password = form.cleaned_data.get("password")
        user.set_password(password)
        user.save()
        return redirect('login')
return render(request, 'register.html', {'form': form})

''' 使用 request.files 在表单中添加图片'''

register.html

         <form action="{% url 'register' %}" method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <div class="body bg-gray">
                <div class="form-group">
                    {{ form.as_p }}
                </div>
            </div>

            <div class="footer">                    

                <button type="submit" class="btn bg-olive btn-block">Sign me up</button>

                <a href="{% url 'login' %}" class="text-center">I already have Account</a>
            </div>
        </form>

'''用户多部分添加图片'''

Answer 3

在 Django 3.0.7 和 wagtail wagtail 2.9 上，我可以这样解决：

models.py

class User(AbstractUser):
avatar = models.ForeignKey(
    'wagtailimages.Image',
    null=True,
    blank=True,
    on_delete=models.SET_NULL,
    related_name='+'
)

forms.py

使用 ModelChoiceField 而不是 ImageField 很重要，因此您符合 AdminImageChooser 小部件。

from django import forms

from wagtail.images import get_image_model
from wagtail.images.widgets import AdminImageChooser
from wagtail.users.forms import UserCreationForm, UserEditForm


class CustomUserEditForm(UserEditForm):
    avatar = forms.ModelChoiceField(
        queryset=get_image_model().objects.all(), widget=AdminImageChooser(),
    )


class CustomUserCreationForm(UserCreationForm):
    avatar = forms.ModelChoiceField(
        queryset=get_image_model().objects.all(), widget=AdminImageChooser(),
    )

模板

无需手动加载任何 Javascript。小部件为您完成。

任何模板目录/wagtailusers/users/create.html

{% extends "wagtailusers/users/create.html" %}

{% block extra_fields %}
  {% include "wagtailadmin/shared/field_as_li.html" with field=form.avatar %}
{% endblock extra_fields %}

任何模板目录/wagtailusers/users/edit.html

{% extends "wagtailusers/users/edit.html" %}

{% block extra_fields %}
  {% include "wagtailadmin/shared/field_as_li.html" with field=form.avatar %}
{% endblock extra_fields %}

Answer 4

对我来说，解决方案是确保使用 AdminImageChooser 在创建和编辑表单类上初始化图像字段小部件

from wagtail.users.forms import UserEditForm
from wagtail.images.widgets import AdminImageChooser


class CustomUserEditForm(UserEditForm):
    ...
    mugshot = AdminImageChooser()

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['mugshot'].widget = AdminImageChooser()

当您将UserCreationForm 子类化时，您也需要这样做。

Django 3.2.6，Wagtail 2.14