Django接口触发MultiValueDictKeyError但参数值已存在的问题

核心问题分析 #

你遇到的MultiValueDictKeyError本质是Django的request.POST字典中找不到image_name键，尽管Postman测试正常，但浏览器环境下存在参数传递失败的可能，以下是针对性的解决步骤：

1. 修复前端sessionStorage取值逻辑 #

前端代码中sessionStorage.getItem('image_name').valueOf()存在风险：如果sessionStorage中没有image_name键，getItem会返回null，调用valueOf()会直接报错，导致FormData无法正确添加image_name参数。

修改前端代码：

function submitPaymentDetails() {
  var email = document.getElementById('userEmail').value;
  var pay = document.getElementById('userPay').value;
  var img_name = sessionStorage.getItem('image_name');

  // 先校验参数是否存在
  if (!email || !pay || !img_name) {
      console.error('存在空参数，请检查输入和sessionStorage');
      return;
  }

  var formData = new FormData();
  formData.append('email', email);
  formData.append('pid', pay);
  formData.append('image_name', img_name);
  var url = "/payment/";

  // 获取并携带CSRF令牌
  function getCookie(name) {
      let cookieValue = null;
      if (document.cookie && document.cookie !== '') {
          const cookies = document.cookie.split(';');
          for (let i = 0; i < cookies.length; i++) {
              const cookie = cookies[i].trim();
              if (cookie.substring(0, name.length + 1) === (name + '=')) {
                  cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                  break;
              }
          }
      }
      return cookieValue;
  }

  fetch(url, {
      method: 'POST',
      headers: {
          'X-CSRFToken': getCookie('csrftoken'),
      },
      body: formData
  })
  .then(response => {
      if (response.status === 201) {
          return response.json();
      } else {
          throw new Error('Payment details submission failed');
      }
  })
  .then(data => {
      window.location.href = '/thank/';
  })
  .catch(error => {
      console.error('Error:', error);
  });
}

2. 优化Django后端参数获取逻辑 #

直接使用request.POST["key"]会在键不存在时抛出MultiValueDictKeyError，改用get()方法可以避免报错，同时添加参数校验逻辑：

修改后端代码：

class paymentClass(APIView):
    def get(self, request):
        return render(request, "payment.html")

    def post(self, request):
        # 打印POST数据用于调试
        print("收到的POST参数:", dict(request.POST))
        
        email = request.POST.get("email")
        pid = request.POST.get("pid")
        img_name = request.POST.get("image_name")

        # 校验所有必填参数是否存在
        if not all([email, pid, img_name]):
            return JsonResponse({"errorMessage": "缺少必要参数"}, status=400)
 
        result = upload_to_db(email, img_name, pid)
        print(result)
        if result == "success":
            return JsonResponse({"message": "创建成功", "image_name": img_name}, status=201)
        else:
            return JsonResponse({"errorMessage": result}, status=400)

3. 关键原因说明 #

• Postman测试正常是因为可以手动指定所有参数，且默认绕过了Django的CSRF校验；
• 浏览器环境下，缺少CSRF令牌会被Django中间件拦截，可能导致请求参数丢失；
• sessionStorage取值失败会直接导致image_name参数未被添加到FormData中。

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