Django+React应用多部分数据上传耗时优化咨询

前端侧优化 #

• 只提交变更字段：当前代码每次更新都会上传所有表单字段，哪怕用户只修改了单个字段。建议前端保存一份用户初始资料快照，提交时仅将有变化的字段加入FormData，大幅减小请求体体积，降低传输耗时。
• 前端压缩头像后再上传：用户上传的原始头像可能体积较大（几MB），直接上传会占用大量带宽。可以使用browser-image-compression这类库，将图片压缩至500KB以内、尺寸限制在800px左右，能显著提升上传速度。
• 优化请求配置：给axios请求添加超时限制（比如10秒），避免用户无意义等待；同时添加上传进度监听，给用户显示进度条，提升交互体验。

示例优化后的前端代码：

import imageCompression from 'browser-image-compression';

export const editTeacherDetail = async (originalData, updatedData, photo) => {
  const formData = new FormData();

  // 仅添加修改过的字段
  Object.keys(updatedData).forEach(key => {
    if (updatedData[key] !== originalData[key]) {
      const value = typeof updatedData[key] === 'string' ? updatedData[key].toUpperCase() : updatedData[key];
      formData.append(key, value);
    }
  });

  // 压缩头像
  if (typeof photo !== "string") {
    const compressOptions = {
      maxSizeMB: 0.5,
      maxWidthOrHeight: 800,
      useWebWorker: true
    };
    const compressedPhoto = await imageCompression(photo, compressOptions);
    formData.append("profile_photo", compressedPhoto);
  }

  try {
    const response = await axiosInstance.put(`/teacher/edit-detail/`, formData, {
      timeout: 10000,
      onUploadProgress: (e) => {
        const progress = Math.round((e.loaded * 100) / e.total);
        // 这里可以更新前端进度条状态
      }
    });
    return response;
  } catch (error) {
    // 错误处理逻辑保持不变
    if (error.response) {
      ToastNotification("We are facing some problems. Please try again later", "error");
      return error.response;
    } else if (error.request) {
      console.error(error.request);
      return error.request;
    } else {
      console.error(error);
    }
  }
};

后端Django优化 #

• 修正序列化器匹配问题：视图中使用的TeacherDetailUpdateSerializer与你提供的GetTeacherInfoEditSerializer不匹配，需统一命名。同时避免使用exclude，改用fields明确指定允许更新的字段，减少序列化/反序列化的无用开销。

示例修正后的序列化器：

class TeacherDetailUpdateSerializer(serializers.ModelSerializer):
  class Meta:
    model = TeacherDetail
    fields = ['name', 'state', 'adhaar_number', 'current_profession', 'phone', 'location', 'full_address', 'date_of_birth', 'gender', 'name_of_school', 'experience', 'teach_for_no_days', 'subject', 'teach_class', 'home_tuition', 'fees', 'home_tuition_fees', 'shift', 'board', 'profile_photo']

• 给数据库查询加索引：当前通过user=request.user查询TeacherDetail，给user字段添加数据库索引，能大幅提升查询速度，尤其是数据量较大时：

# 在TeacherDetail模型的user字段添加索引
user = models.OneToOneField(CustomUser, on_delete=models.SET_NULL, null=True, blank=True, db_index=True)

• 替换本地存储为云存储：本地存储头像会导致文件写入阻塞请求，且传输速度慢。改用阿里云OSS、腾讯云COS等云存储服务，配合django-storages库快速集成，云存储自带CDN加速，上传下载效率远高于本地。

• 异步处理文件操作：如果暂时无法切换云存储，可使用Celery将头像保存逻辑异步处理，后端先返回成功响应，后台再完成文件写入，避免用户等待文件操作完成。

• 添加耗时日志定位瓶颈：在视图中添加计时代码，明确是数据库查询、序列化还是文件上传导致的延迟：

import time

@api_view(['PUT'])
@permission_classes([IsAuthenticated])
@parser_classes([MultiPartParser, FormParser])     
def edit_teacher_detail(request):
    start = time.time()
    
    data = request.data
    if data is not None:
        # 记录数据库查询耗时
        query_start = time.time()
        queryset = TeacherDetail.objects.get(user = request.user)
        print(f"数据库查询耗时: {time.time()-query_start:.2f}s")
        
        serializer = TeacherDetailUpdateSerializer(instance=queryset, data=data)
        if serializer.is_valid():
            # 记录保存操作耗时
            save_start = time.time()
            serializer.save()
            print(f"序列化及保存耗时: {time.time()-save_start:.2f}s")
            print(f"总请求耗时: {time.time()-start:.2f}s")
            return Response({'message':"details edited"} ,status=status.HTTP_200_OK)
        # 其他逻辑保持不变

数据库与部署优化 #

• 更换数据库引擎：如果使用SQLite，建议换成PostgreSQL或MySQL，性能和并发处理能力更强。同时确保数据库与应用服务器在同一区域，避免跨区域网络延迟。
• 启用Gzip压缩：在Django中开启Gzip压缩，减小响应体体积，加速传输：

# settings.py
MIDDLEWARE = [
    'django.middleware.gzip.GZipMiddleware',
    # 其他中间件...
]

• 升级服务器配置：如果服务器CPU、内存不足，会导致请求处理缓慢，可适当升级服务器资源，或使用负载均衡分散请求压力。

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