如何使用引导模式在 Django 中上传个人资料图片

Question

我正在做一个网络应用程序项目，用户可以在其中更新个人资料图片以及他们的名字、姓氏、简历、网址和用户名。我在 user_update.html 中使用 bootstrap 4 modal 来实现个人资料图片更新。

user_update.html

{% extends 'users/base.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% block maincss %}
<link rel="stylesheet" type="text/css" href="{% static 'users/stylesheet/main.css' %}">
{% endblock maincss %}
{% block updateprofilecontent %}
<main role="main" class="container">
  <div class="row">
    <div class="col-md-8">
      <div class="content-section">
        <div class="media">
          <a href="#" data-toggle="modal" data-target="#profilePicModal">
            <img class="rounded-circle account-img" src="{{ user.profile_picture.url }}">
          </a>
        </div>
        <form method="POST" enctype="multipart/form-data">
            {% csrf_token %}
            <fieldset class="form-group">
                <legend class="border-bottom mb-4">Edit Profile</legend>
                {{ u_form|crispy }}
            </fieldset>
            <div class="form-group">
                <button class="btn btn-outline-info" type="submit">Update</button>
            </div>
        </form>
      </div>
    </div>
  </div>
</main>

<!-- Modal -->
<div class="modal fade" id="profilePicModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Choose Profile Picture</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        {{ p_form|crispy }}
      </div>
    </div>
  </div>
</div>
{% endblock updateprofilecontent %}

urls.py

from django.contrib import admin
from django.urls import path
from users import views as user_views
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path("admin/", admin.site.urls),
    path('user/update/', user_views.userUpdate, name='user-update'),
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

用户/forms.py

class UserUpdateForm(forms.ModelForm):
    username = forms.CharField(widget=forms.TextInput(attrs={'class': 'input', 'placeholder': 'username'}), label='', required=False)
    first_name = forms.CharField(widget=forms.TextInput(attrs={'class': 'input', 'placeholder': 'First Name'}), label='', required=False)
    last_name = forms.CharField(widget=forms.TextInput(attrs={'class': 'input', 'placeholder': 'Last Name'}), label='', required=False)
    bio = forms.CharField(widget=forms.TextInput(attrs={'class': 'input', 'placeholder': 'Bio'}), label='', required=False)
    url = forms.CharField(widget=forms.TextInput(attrs={'class': 'input', 'placeholder': 'URL'}), label='', required=False)

    class Meta:
        model = User 
        fields = ['username', 'first_name', 'last_name', 'bio', 'url']



class ProfilePicUpdateForm(forms.ModelForm):
    profile_picture = forms.ImageField(widget=forms.FileInput(attrs={}), label='', required=False)

    class Meta:
        model = User 
        fields = ['profile_picture']

views.py

def userUpdate(request):
    if request.method == 'POST':
        u_form = UserUpdateForm(request.POST, instance=request.user)
        p_form = ProfilePicUpdateForm(request.POST, request.FILES, instance=request.user)
        if u_form.is_valid() and p_form.is_valid():
            u_form.save()
            p_form.save()
            return redirect('timeline')
    else:
        u_form = UserUpdateForm(instance=request.user)
        p_form = ProfilePicUpdateForm(instance=request.user)

    context = {
        'u_form': u_form,
        'p_form': p_form
    }

    return render(request, 'users/user_update.html', context)

我可以从引导模式的“选择文件”选项中选择个人资料图片。其他用户个人资料信息（如用户名、简历、网址等）会正确更新。但是个人资料图片没有更新。它只能选择个人资料图片。我如何使用其他用户信息（如用户名、简历、网址等）更新个人资料图片？