接口响应status为canceled，图片上传失败

Question

上传图片接口，接口响应status为canceled，图片上传失败，在其他地方上传没有问题，只有在点击下一步时调用返回接口时报错

function jtfuction(key,num,data,addnum){
  var id,jttype;
  switch (key) {
    //crs截图
    case "5":
    id="huaxui-dialog-crs";
    jttype="9050_2";
    break;
    case "4":
    id="customerinfo";
    jttype="9050_1";
    break;
  }
  //截图
  $("#loadingToast").show();
  var c_height =document.getElementById(id).offsetTop;
  var r_height=$("#"+id).height();
  html2canvas(document.querySelector("#"+id),{
    width: 1400,
    height:r_height,
    y:c_height,
    useCORS:true,
  }).then(function(canvas){
      var jtpostdata = {
        "sales_agent": hxcjs.getUrlString("sales_agent"),
        "mode": hxcjs.getUrlString("mode"),
        "token_wt": hxcjs.getUrlString("token_wt"),
        "order_no":order_no,
        "plan_no": plan_no,
        "type": jttype,
        "img_src":canvas.toDataURL("image/jpeg",0.5).replace("data:image/jpeg;base64,", '')
      };
      $.ajax({
        type: 'POST',
        url: commonurl + 'upload/photo',
        data: JSON.stringify(jtpostdata),
        timeout: 50000,
        contentType: "application/json",
        async: true,
        dataType: 'json',
        success: function(req) {
          if (req.result_code == "0") {
            if(key!='4'&&key!='5'){
                if(num==addnum){
                  exceedstandard(data);
                }
            }
          } else {
            $('#loadingToast').hide();
            hxui.toast("图片上传失败请重新上传");
          }
          $('#loadingToast').hide();
        },
        complete: function(XMLHttpRequest, status) {　
          if (status == 'timeout') {
            $('#loadingToast').hide();
            $("#errInfo").show();　　　　
          }　　　　
        },
        error: function() {
          $('#loadingToast').hide();
        }
      });
  })
}

function saveajax(data){
  $.ajax({
     url: commonurl + 'save/appinfo',
     data: JSON.stringify(data),
     type: 'POST',
     timeout:50000,
     dataType: 'json',
     contentType: "application/json",
     success: function (data) {
         if (data.result_code == "0") {
             $('#loadingToast').hide();
            // 税收居民
            crs_verify = data.crs_verify
            crs_url = data.crs_url
            if(vm.iscrs=='1'&&crs_product_verify=="Y"){
                //截图
                jtfuction("4")
            }
         }else{
             $('#loadingToast').hide();
             hxui.toast(data.result_message)
         }
     },complete : function(XMLHttpRequest,status){
         　if(status=='timeout'){
               $('#loadingToast').hide();
               $("#errInfo").show();
    　　　　}
　　　　}
    })
}
function exceedstandard(data){
  saveajax(data);
}
function saveData(type) {
   exceedstandard(data);
}
saveup: function () {
   saveData(1);
},
<div class="fr common_right_btn" @click="saveup()" >下一步</div>

Answer 1

【以下回答由 GPT 生成】

首先，我们需要理解为什么图片上传接口的状态会被取消（status为canceled），以及这个问题是如何出现的。通常情况下，图片上传的过程中，如果发生网络中断或者用户取消上传操作，就会导致上传请求被取消，并且接口的状态会被设置为canceled。

针对这个问题，可以考虑以下几个解决方案：

1. 检查网络连接：首先要确保网络连接是否正常。你可以尝试使用浏览器进行其他网络操作，如浏览网页或发送其他请求，以确定网络连接是否稳定。

2. 检查上传操作：确认上传操作是否被正确执行。你可以通过在上传操作之前添加一些日志或打印语句，以确保上传的触发和执行是正确的。

3. 添加错误处理逻辑：在图片上传请求的代码中，添加错误处理逻辑，以捕捉并处理上传过程中可能发生的错误。可以使用try...catch语句来捕捉异常，并在捕捉到异常时进行相应的处理，例如显示错误提示信息或者重新尝试上传操作。

下面是一个示例代码，展示了如何添加错误处理逻辑：

$.ajax({
  type: 'POST',
  url: comm,
  data: jtpostdata,
  success: function(response) {
    // 处理成功响应
    // ...
  },
  error: function(xhr, status, error) {
    if (status === 'canceled') {
      // 上传取消处理逻辑
      // ...
    } else {
      // 其他错误处理逻辑
      // ...
    }
  }
});

1. 调整请求超时时间：有时候，如果图片上传比较大或者网络不稳定，可能需要更长的时间才能完成上传操作。可以尝试使用timeout参数来设置请求的超时时间，以避免上传操作因超时而被取消。例如：

$.ajax({
  type: 'POST',
  url: comm,
  data: jtpostdata,
  timeout: 10000, // 设置超时时间为10秒
  success: function(response) {
    // 处理成功响应
    // ...
  },
  error: function(xhr, status, error) {
    // 处理错误响应
    // ...
  }
});

如果以上解决方案都没有解决该问题，那么可能问题出现在接口的实现上，或者是其他的环境配置问题。此时，可能需要进行更深入的调查和排查，或者联系相关负责人员进行进一步的协助。

请注意，以上解决方案仅用于参考，具体解决方案还需要根据实际情况进行调整和优化。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^