讲师中心 微信公众号
AI工具推荐 视频效率加速

Layui上传组件如何获取后台返回的自定义JSON结果

酷明酱_7523

酷明酱_7523

发布时间:2026-07-09 10:41:19

|

230人浏览过

|

来源于php中文网

原创

只有done回调能拿到解析后的JSON对象,因Layui仅在响应体为合法JSON、Content-Type为application/json且状态码匹配配置时才触发done并传入已解析对象,其他入口不可靠。

必须走 done 回调,其他入口(success、complete、手动读 xhr.responsetext)都不可靠——layui 不暴露原生 xhr,也不在非 done 钩子中解析响应体。

为什么只有 done 能拿到解析后的 JSON 对象

Layui upload 内部只在满足三个条件时才触发 done 并传入已解析对象:响应体是合法 JSON 字符串、Content-Type 为 application/json、且状态字段(默认 code)值等于配置的 statusCode(默认 0)。任一不满足,就跳过 done 直接进 error 或静默失败。

常见误判:HTTP 状态码是 200,但后端返回了 HTML 片段或带 BOM 的 JSON,Layui 会因 JSON.parse() 报错而弃用整个响应体。

  • done 的 res 参数一定是 JS 对象,不是字符串
  • error 回调里拿不到 res,只有 index 和 upload 实例
  • 不要在 choose 或 before 里尝试提前读取服务器返回——此时请求还没发

response 配置必须显式声明字段映射

后端返回 {"status":1,"message":"ok","payload":{"url":"/upload/a.jpg"}}?Layui 默认只认 code,不配 response 就永远进不了 done。

这个配置不是可选装饰项,而是桥接协议的关键开关:

  • statusName: 'status' —— 告诉 Layui 从 res.status 取状态码
  • statusCode: 1 —— 指定值为 1 才算成功(而非默认的 0)
  • msgName: 'message' —— 错误提示从 res.message 提取
  • dataName: 'payload' —— 实际数据在 res.payload 下,done 中直接用 res.payload.url

示例完整配置:

Aria2 Json Rpc
Aria2 Json Rpc

通过 JSON‑RPC 2.0 与 aria2 下载管理器交互,使用自然语言命令管理下载、查询状态并控制任务。适用于 aria2、下载管理或种子操作。

下载
layui.upload.render({
  elem: '#upload',
  url: '/api/upload',
  response: {
    statusName: 'status',
    statusCode: 1,
    msgName: 'message',
    dataName: 'payload'
  },
  done: function(res) {
    console.log(res.payload.url); // ✅ 正确取到路径
  }
});

后端返回必须是干净的 JSON 字符串

哪怕结构完全正确,只要响应体开头有 BOM、中间多了一个空格、结尾多了个 var_dump(),Layui 就会解析失败并进 error。

PHP 示例(避坑写法):

header('Content-Type: application/json; charset=utf-8');
if (ob_get_level()) ob_end_clean(); // 清掉所有前置输出
$result = [
  'status' => 1,
  'message' => '上传成功',
  'payload' => ['url' => '/uploads/20260630/abc.png']
];
echo json_encode($result, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
  • 绝对不用 print_r()、die('success')、echo '<html>...'
  • 框架如 ThinkPHP/Laravel 需确认是否自动加了 layout 或调试信息
  • IE8 等旧浏览器要求 Content-Type 改为 text/html,且后端必须返回字符串而非数组(json_encode 结果)

done 里取不到字段?先查字段名是否完全一致

Layui 不做字段转换,res 就是后端返回 JSON 的 JS 对象映射。后端返回 {"fileUrl":"/x.jpg"},前端就必须写 res.fileUrl,写 res.data 或 res.url 都是 undefined。

  • 检查大小写:后端是 file_url,前端不能写 res.fileUrl(除非服务端做了驼峰转换)
  • 检查嵌套层级:返回 {"data":{"src":"/a.jpg"}},就要用 res.data.src,不是 res.src
  • 用 console.log(res) 看清实际结构,别凭印象写字段名

最常被忽略的是:后端字段名和服务端约定不一致,又没配 response.dataName,导致前端以为数据在顶层,其实藏在 res.data 或 res.payload 里。

热门AI工具

更多
二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

1995

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2762

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

956

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

3099

2025.09.10

ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2420

2023.06.14

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

340

2023.08.31

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2253

2023.11.15

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1141

2024.09.24

PixTV AI视频生成与无限画布创作
PixTV AI视频生成与无限画布创作

PixTV专题整理AI视频与视觉内容创作相关功能使用教程,涵盖AI生图、视频生成、无限画布、多模型创作、素材管理、声音音乐及视频剪辑等功能,帮助用户快速掌握PixTV从创意到成片的完整制作方法。

0

2026.09.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.5万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 10.8万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn