Categories: HTMLJavaScriptJavaScriptjQueryWeb UploaderWeb前端Web应用开发文件上传组件编程语言

排查分析 http 请求响应 500 的过程，jQuery 属性操作 – attr() 方法，设置 src 属性导致

图2

1、上传图片成功之后，GET 请求：https://console.xxx.cn/upload/20210319/20210385015127.png ，响应 500。根源在于上传成功后的图片的域名不是：https://console.xxx.cn ，而是：https://web.xxx.cn 。如图1

图1

2、打开发起程序选项卡，查看请求调用堆栈，在页面的第 516 行执行的 GET 请求。如图2

图2

3、点击进入，JS 代码如下。jQuery 属性操作 – attr() 方法，设置 src 属性。如图3

图3

goodsSl.on('uploadSuccess', function (file, json) {
    $('.edit_img_tipthumb').attr("src", json.theUrl);
    $('input[name="data[Product][thumb_img]"]').val(json.theUrl);
})

4、json.theUrl 的值：/upload/20210319/20210385015127.png。决定使用绝对地址，添加域名前缀：https://web.xxx.cn 。编辑代码如下

goodsSl.on('uploadSuccess', function (file, json) {
    $('.edit_img_tipthumb').attr("src", 'https://web.xxx.cn/creditshop_back' +  json.theUrl);
    $('input[name="data[Product][thumb_img]"]').val(json.theUrl);
})

5、上传图片成功之后，GET 请求：https://web.xxx.cn/upload/20210319/20210385015127.png ，响应 200。如图3

图3

永夜