settings.py中配置MEDIA_ROOTos.path.join(BASE_DIR,media) MEDIA_URL/media/model中配制avatarmodels.CharField(verbose_name头像,nullTrue,blankTrue,max_length128)视图中csrf_exempt def image_add(request): image_objectrequest.FILES[avatar] image_addressstr(image_object.name).split(.)[-1] image_address_write[png,jpg] if image_address not in image_address_write: return JsonResponse({status: False, error: 请上传正确的图片格式}) image_namerequest.session[info][username].png file_path os.path.join(media/avatar/,image_name) with open(file_path,wb) as image_file: for chunk in image_object.chunks(): image_file.write(chunk) admin_app.models.UserInfo.objects.filter(idrequest.session[info][id]).update(avatarfile_path) return JsonResponse({status:True})路由path(image/add/, percenter.image_add, nameimage_add),前端 用ajax上传{% extends layout_index/layout_index.html %} {% load static %} {% block css %} link relstylesheet href{% static utils/css/perfile.css %} {% endblock %} {% block content %} div classcrm-profile-wrapper !-- ✅ 主卡片 -- div classcrm-profile-card !-- 左侧头像上传 -- div classcrm-profile-avatar div classcrm-avatar-box onclickdocument.getElementById(crmAvatar).click() /div p classcrm-avatar-hint点击上传头像brJPG / PNG · 最大 2MB/p form idformImage enctypemultipart/form-data input typefile idcrmAvatar nameavatar acceptimage/jpeg,image/png styledisplay:none button typebutton classcrm-form-btn stylewidth:130px; onclicksubmitAvatar() 上传头像 /button /form /div !-- 右侧修改密码 -- div classcrm-profile-forms div h2 classcrm-section-title修改密码/h2 p classcrm-section-desc定期更换密码有助于保护账号安全/p /div form idper-form-data {% for item in form %} div classcrm-form-group label{{ item.label }}/label {{ item }} span stylecolor: red/span /div {% endfor %} /form button classcrm-form-btn idconfirepwd 保存密码 /button /div /div /div {% endblock %} {% block js %} script submitPassword(); document.getElementById(crmAvatar).addEventListener(change, function (e) { const file e.target.files[0]; if (!file) return; const reader new FileReader(); reader.onload function (ev) { const avatarBox document.querySelector(.crm-avatar-box); // 如果已经有 img直接换 src let img avatarBox.querySelector(img); if (!img) { avatarBox.innerHTML ; img document.createElement(img); img.style.width 100%; img.style.height 100%; img.style.objectFit cover; img.style.borderRadius 50%; avatarBox.appendChild(img); } img.src ev.target.result; }; reader.readAsDataURL(file); }); /* 表单提交示例 */ function submitAvatar() { {#e.preventDefault();#} {#alert(头像已准备好可在此处 fetch 上传);#} let formData new FormData($(#formImage)[0]) $.ajax({ url: /image/add/, type: post, data: formData, dataType: JSON, {# 禁止jquery自动设置请求头信息 #} contentType:false, {# 禁止jquery自动处理数据 #} processData:false, {# 禁用浏览器缓存 #} cache:false, success:function (res){ if(res.status){ alert(上传成功) }else{ alert(res.error) } } }) } function submitPassword() { $(#confirepwd).click(function () { $.ajax({ url:/modify/percenter/, type:post, data:$(#per-form-data).serialize(), dataType:JSON, success: function (res) { alert(res.status) if (res.status){ alert(修改成功) //location.reload() }else { $.each(res.error, function (name, date) { $(#id_name).next().text(date[0]) }) } } }) }) } /script {% endblock %}可以访问一定先要配置settings然后在总路由中配置路由re_path(r^media/(?Ppath.*)$,serve,{document_root:settings.MEDIA_ROOT},namemedia),