如何给Django AbstractUser自定义用户模型添加图片并实现Vue上传接口

核心实现步骤 #

1. 编写视图函数 #

直接通过request.FILES获取前端上传的文件，关联到当前登录用户的CUser实例：

from django.shortcuts import HttpResponse
from django.contrib.auth.decorators import login_required
from .models import CUser

@login_required
def update_user_image(request):
    if request.method != 'POST':
        return HttpResponse('仅接受POST请求', status=405)
    
    # 注意：这里的key要和前端FormData中append的键完全一致
    uploaded_file = request.FILES.get('user_image')
    if not uploaded_file:
        return HttpResponse('未上传有效文件', status=400)
    
    # 关联到当前登录用户并保存
    current_user = request.user
    current_user.image = uploaded_file
    current_user.save()
    
    return HttpResponse('头像更新成功', status=200)

2. 前端FormData请求规范 #

Vue中用Fetch API发送请求时，要确保FormData的键和后端匹配，同时携带登录凭证：

async uploadAvatar() {
  const formData = new FormData();
  // 这里的'user_image'要和后端request.FILES.get的参数一致
  formData.append('user_image', this.avatarFile);

  try {
    const res = await fetch('/update-user-image/', {
      method: 'POST',
      body: formData,
      credentials: 'include' // 携带登录Cookie，让后端识别当前用户
    });
    if (res.ok) {
      alert('头像上传成功');
    }
  } catch (err) {
    console.error('上传失败', err);
  }
}

3. 必要的配置检查 #

• 在settings.py中配置媒体文件存储路径：

MEDIA_ROOT = BASE_DIR / 'media'  # 上传的文件会存在项目根目录的media/uploads下
MEDIA_URL = '/media/'

• 在项目主urls.py中添加媒体文件路由（仅开发环境使用，生产环境用静态文件服务器托管）：

from django.conf import settings
from django.conf.urls.static import static
from . import views

urlpatterns = [
    # ... 其他路由
    path('update-user-image/', views.update_user_image, name='update_user_image'),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

内容的提问来源于stack exchange，提问作者Anthony