Фотография пользователя не загружается при редактировании

Я работаю над формой регистрации пользователя. В этой форме есть поле ImageField для того, чтобы пользователь мог загрузить туда свою фотографию. Дело в том, что это ImageField существует только в forms.py, в models.py фотография сохраняется в BinaryField под названием photo.

В моем views.py при сохранении формы я преобразовываю это изображение в base64, сохраняю изображение в поле фото и сохраняю форму.

Пока все хорошо, я могу сохранить форму. Проблема заключается в редактировании этой формы пользователя, как мне загрузить эту фотографию, чтобы пользователь мог просмотреть ее в шаблоне?

models.py:

class User(models.Model):
    photo = models.BinaryField(null=True, blank=True)

forms.py:

class UserForm(forms.ModelForm):
    image = forms.ImageField(required=False, label='Photo')

views.py:

 if form.is_valid():
            if form.cleaned_data['image']:
                user = form.save(commit=False)
                user.photo = base64.encodestring(form.cleaned_data['image'].file.read())
                user.save()

Если вы хотите вывести изображение до того, как форма будет отправлена, вам нужно использовать javascript.

Пример

$('your_file_input_field').change(function() {
      src = URL.createObjectURL($(this).prop('files')[0]);
      $('your_image_container').attr("src", src);
}

Если вы хотите отобразить изображение, которое было двоично закодировано (то есть после того, как оно было сохранено в вашей базе данных), обратитесь к этому обсуждению (https://stackoverflow.com/questions/55886078/).

В общем случае не стоит сохранять изображение в базе данных в двоичном виде, если у вас нет особых причин для этого. Вместо этого просто используйте поле file для сохранения изображения, которое затем будет ссылаться на соответствующий файл в структуре dir вашего сервера.

Интересный вопрос, Адриано. Вы можете получить доступ к изображению, используя атрибут instance в form. Предположим, что у вас есть функция представления edit, которая принимает pk и передает форму в качестве контекста следующим образом...

def edit(request, pk):
    user = User.objects.filter(pk=pk).first()
    if request.method == "POST":
        pass
        return HttpResponseRedirect(reverse("edit", args=[pk]))
        
    form = UserForm(instance=user)
    return render(request, "index.html", {"form": form})

Как я уже говорил, теперь очень легко получить доступ к атрибуту фотографии в шаблоне следующим образом {{ form.instance.photo }}

<div id="updateImageHere"></div>

<script>
  const decodedImageString = "{{ form.instance.photo.decode }}";
  
  var image = new Image();
  image.src = `data:image/png;base64,${decodedImageString}`;
  
  const updateImageHere = document.getElementById("updateImageHere")
  updateImageHere.appendChild(image);
</script>

Я присвоил декодированную фотографию константе, а затем использовал image.src для добавления в div updateImagehere. Дайте мне знать, если у вас есть какие-либо вопросы...

Вернуться на верх