React前端传图至Django后端失败，NoneType相关报错求助

核心问题：表单字段名大小写不匹配 #

前端代码里你用formData.append('image', image);，字段名是小写的image，但后端用Image_predict= request.data.get('Image')取的是大写开头的Image，这直接导致Image_predict为None，调用Image.open(None)自然会抛出AttributeError。

第一步：修正字段名匹配 #

把后端的字段名改成和前端一致的小写：

class UploadView(APIView):
    permission_classes = (permissions.AllowAny,)  # 建议开启，避免未授权拦截
    parser_classes = (MultiPartParser,)  # JSONParser不需要，因为传的是FormData格式

    @staticmethod
    def post(request):
        Image_predict = request.data.get('image')  # 这里改成小写的image
        if not Image_predict:
            return Response({"error": "No image provided"}, status=status.HTTP_400_BAD_REQUEST)
        
        # 后续模型加载和图片预处理代码...

第二步：完善后端响应与错误处理 #

当前后端代码没有返回任何响应，这会导致请求超时或500错误。必须在方法末尾添加预测结果的返回，同时捕获预处理中的异常：

from rest_framework import status
from rest_framework.response import Response
import traceback

# ... 其他必要导入

class UploadView(APIView):
    permission_classes = (permissions.AllowAny,)
    parser_classes = (MultiPartParser,)

    @staticmethod
    def post(request):
        Image_predict = request.data.get('image')
        if not Image_predict:
            return Response({"error": "No image provided"}, status=status.HTTP_400_BAD_REQUEST)
        
        try:
            # 建议模型提前加载（比如在项目启动时初始化），不要每次请求都加载，浪费资源
            # ResNetModel = ResNetModelConfig.model
            # InceptionV3model = InceptionV3modelConfig.model

            # 预处理图片
            image_raw = Image.open(Image_predict)
            image1 = np.array(image_raw.resize((224, 224)))
            if len(image1.shape) == 2:
                image1 = np.expand_dims(image1, axis=2)
                image1 = np.concatenate([image1, image1, image1], axis=-1)
            elif len(image1.shape) == 3 and image1.shape[2] == 4:
                image1 = image1[:, :, :3]
            
            # 执行预测逻辑（示例）
            # resnet_pred = ResNetModel.predict(...)
            # inception_pred = InceptionV3model.predict(...)
            
            # 返回预测结果
            return Response({
                "success": True,
                # "resnet_result": resnet_pred,
                # "inception_result": inception_pred
            }, status=status.HTTP_200_OK)
        
        except Exception as e:
            traceback.print_exc()  # 打印详细错误到控制台，方便调试
            return Response({"error": str(e)}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)

第三步：前端代码优化 #

1. 修正fetch地址的双斜杠：http://127.0.0.1:8000//api/classify-image改成http://127.0.0.1:8000/api/classify-image
2. 处理后端返回的错误状态码，避免直接跳转：

const SubmitImage = () => {
    if (!image) return alert('Please select an image first');

    const formData = new FormData();
    formData.append('image', image);

    fetch('http://127.0.0.1:8000/api/classify-image', {
        method: 'POST',
        body: formData,
    })
        .then((response) => {
            if (!response.ok) {
                throw new Error(`Upload failed with status: ${response.status}`);
            }
            return response.json();
        })
        .then((data) => {
            console.log(data);
            Navigate('/output', { state: { image: image, prediction: data } });
        })
        .catch((error) => {
            console.error('Error:', error);
            alert('Upload failed, please try again');
        });
};

其他注意事项 #

• 跨域问题：如果前端和后端端口不同，需要在Django中配置CORS。安装django-cors-headers后，在settings.py中添加：

  INSTALLED_APPS = [
      # ...
      'corsheaders',
  ]
  
  MIDDLEWARE = [
      'corsheaders.middleware.CorsMiddleware',
      'django.middleware.common.CommonMiddleware',
      # ...
  ]
  
  CORS_ALLOW_ALL_ORIGINS = True  # 开发环境可用，生产环境需配置具体域名
  

• 模型加载优化：不要在每次请求时加载模型，建议在项目启动时提前初始化（比如在apps.py的ready方法中），避免重复加载导致性能问题。

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