后端请求规范
与后台通信的功能列表 ueditor和后台通信的功能较多,这里列一下编辑器和后台通信的功能:
- 上传图片
- 拖放图片上传、粘贴板图片上传
- word文档图片转存
- 截图工具上传
- 上传涂鸦
- 上传视频
- 上传附件
- 在线图片管理
- 粘贴转存远程图片
- 前端请求通过唯一的后台文件 controller.php处理前端的请求
- controller.php通过GET上的action参数,判断是什么类型的请求
- 省去不必要的请求,去除涂鸦添加背景的请求,用前端FileReader读取本地图片代替
- 请求返回数据的格式,常规返回json字符串,数据包含state属性(成功时返回'SUCCESS',错误时返回错误信息)。
- 请求支持jsonp请求格式,当请求有通过GET方式传callback的参数时,返回json数据前后加上括号,再在前面加上callback的值,格式类似这样:
cb({"key": "value"})
1. config
请求参数:
GET {"action": "config"} POST "upfile": File Data
返回格式:
// 需要支持callback参数,返回jsonp格式
{
"imageUrl": "http://localhost/ueditor/php/controller.php?action=uploadimage",
"imagePath": "/ueditor/php/",
"imageFieldName": "upfile",
"imageMaxSize": 2048,
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"]
}
2. uploadimage
请求参数:
GET {"action": "uploadimage"} POST "upfile": File Data
返回格式:
{
"state": "SUCCESS",
"url": "upload/demo.jpg",
"title": "demo.jpg",
"original": "demo.jpg"
}
3. uploadscrawl
请求参数:
GET {"action": "uploadscrawl"} POST "content": Base64 Data
返回格式:
{
"state": "SUCCESS",
"url": "upload/demo.jpg",
"title": "demo.jpg",
"original": "demo.jpg"
}
4. uploadvideo
请求参数:
GET {"action": "uploadvideo"} POST "upfile": File Data
返回格式:
{
"state": "SUCCESS",
"url": "upload/demo.mp4",
"title": "demo.mp4",
"original": "demo.mp4"
}
5. uploadfile
请求参数:
GET {"action": "uploadfile"} POST "upfile": File Data
返回格式:
{
"state": "SUCCESS",
"url": "upload/demo.zip",
"title": "demo.zip",
"original": "demo.zip"
}
6. listimage
请求参数:
GET {"action": "listimage", "start": 0, "size": 20}
返回格式:
// 需要支持callback参数,返回jsonp格式
{
"state": "SUCCESS",
"list": [{
"url": "upload/1.jpg"
}, {
"url": "upload/2.jpg"
}, ],
"start": 20,
"total": 100
}
7. catchimage
请求参数:
GET { "action": "catchimage", "source": [ "http://a.com/1.jpg", "http://a.com/2.jpg" ] }
返回格式:
// 需要支持callback参数,返回jsonp格式
// list项的state属性和最外面的state格式一致
{
"state": "SUCCESS",
"list": [{
"url": "upload/1.jpg",
"source": "http://b.com/2.jpg",
"state": "SUCCESS"
}, {
"url": "upload/2.jpg",
"source": "http://b.com/2.jpg",
"state": "SUCCESS"
}, ]
}
推荐阅读
- web网页模板|如此优秀的JS轮播图,写完老师都沉默了
- 接口|axios接口报错-参数类型错误解决
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- vue|Vue面试常用详细总结
- javascript|vue使用js-xlsx导出excel,可修改格子样式,例如背景颜色、字体大小、列宽等
- css|我用css精灵图拼接了自己的英文名字,不会还有人不知道精灵图技术吧()
- css|css三角的做法及其案例