django图片上传
settings.py中配置
MEDIA_ROOT=os.path.join(BASE_DIR,'media') MEDIA_URL="/media/"model中配制
avatar=models.CharField(verbose_name="头像",null=True,blank=True,max_length=128)视图中
@csrf_exempt def image_add(request): image_object=request.FILES['avatar'] image_address=str(image_object.name).split('.')[-1] image_address_write=['png','jpg'] if image_address not in image_address_write: return JsonResponse({"status": False, "error": '请上传正确的图片格式'}) image_name=request.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(id=request.session['info']['id']).update(avatar=file_path) return JsonResponse({"status":True})路由
path("image/add/", percenter.image_add, name="image_add"),前端 用ajax上传
{% extends "layout_index/layout_index.html" %} {% load static %} {% block css %} <link rel="stylesheet" href="{% static 'utils/css/perfile.css' %}"> {% endblock %} {% block content %} <div class="crm-profile-wrapper"> <!-- ✅ 主卡片 --> <div class="crm-profile-card"> <!-- 左侧：头像上传 --> <div class="crm-profile-avatar"> <div class="crm-avatar-box" onclick="document.getElementById('crmAvatar').click()"> 👤 </div> <p class="crm-avatar-hint">点击上传头像<br>JPG / PNG · 最大 2MB</p> <form id="formImage" enctype="multipart/form-data"> <input type="file" id="crmAvatar" name="avatar" accept="image/jpeg,image/png" style="display:none" > <button type="button" class="crm-form-btn" style="width:130px;" onclick="submitAvatar()"> 上传头像 </button> </form> </div> <!-- 右侧：修改密码 --> <div class="crm-profile-forms"> <div> <h2 class="crm-section-title">修改密码</h2> <p class="crm-section-desc">定期更换密码有助于保护账号安全</p> </div> <form id="per-form-data"> {% for item in form %} <div class="crm-form-group"> <label>{{ item.label }}</label> {{ item }} <span style="color: red"></span> </div> {% endfor %} </form> <button class="crm-form-btn" id="confirepwd"> 保存密码 </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/(?P<path>.*)$',serve,{'document_root':settings.MEDIA_ROOT},name='media'),