Django - загрузить только картинку в модель с запросом POST

Question

Я хотел бы загрузить изображение профиля с помощью ajax.

Но даже если я не отправляю изображение с помощью ajax, оно не работает.

У меня есть следующий кодна моем сайте:

<form action="{% url 'update_profile_pic' %}" method="post">
  {% csrf_token %}
  <input name="profilePic" type="file" accept="image/*"/>
</form>

ProfilePic должен быть сохранен в модели:

class UserProfile(models.Model):
    user = models.OneToOneField(
        User,
        on_delete=models.CASCADE,
        primary_key=True,
    )

    profilePic = ProcessedImageField(
        upload_to=generate_random_filename,
        processors=[ResizeToFill(150, 150)],
        format='JPEG',
        options={'quality': 60},
    )
...

В url.py указана правильная запись:

...
    path('update_profile_pic/', views.UpdateProfilePic.as_view(), name='update_profile_pic'),
...

Форма выглядит следующим образом:

class ProfilePicForm(forms.ModelForm):
    class Meta:
        model = UserProfile
        fields = ('profilePic',)

И представление также должно быть правильным:

class UpdateProfilePic(View):
    def post(self, request):
        form = ProfilePicForm(self.request.POST, self.request.FILES)
        if form.is_valid():
            request.user.userprofile.profilePic = form.cleaned_data['profilePic']
            request.user.userprofile.save()
            return JsonResponse({
                image_url : request.user.userprofile.profilePic.url
            })
        else:
            raise Http404(form.errors)

Но я всегда получаю ошибку "profilePic Это поле обязательно для заполнения.", когда я загружаюрисунок. Эта ошибка происходит из-за повышения Http404(form.errors), поэтому форма недействительна.

Когда я смотрю на заголовки на вкладке сети в Google Chrome, он показывает мне это:

csrfmiddlewaretoken: sbyaJ8J7COSdC0OUYr4p8ToaarjFrIniDKLT3Lr36PVeTUlc9MEafr77exYVvkXL

profilePic: fr.cc38d01b0b77.gif

1030

1030

Answer 1

Измените форму на:

<form action="{% url 'update_profile_pic' %}" method="post" enctype="multipart/form-data">
  {% csrf_token %}
  <input name="profilePic" type="file" accept="image/*"/>
</form>

Вы пропустили enctype="multipart/form-data".

Если у вас возникнут какие-либо проблемы с бэкэндом, тогда эта документация поможет вам.

Answer 2

multipart определено для поддержки формата файла. Таким образом, если вы не укажете эту модель, то форма не сможет поддерживать любой формат файла. Например, если вам нужно загрузить файл PDF, видеофайл или файл изображения, для любого типа файла необходима форма модели, чтобы знать, что вы хотите загрузить файл, из соображений безопасности.

Есливам нужны только данные, которые каждый может загрузить или попытаться сделать что-то недопустимое

***<form action="{% url 'update_profile_pic' %}" method="post" enctype="multipart/form-data">***