avue-plugin-ueditor 版本:0.2.7
背景:
我之前写的一篇基于0.2.3版本,那个版本bug较多,但是改改还可以用.今天有时间逛了一下gitee,发现竟然更新了0.2.7版本,拷打真的有用!然后我项目直接更新,运行项目提示404 NOT FOUND,说明配置更改了。经过参考与研究后发现了与之前写法的区别。这里直接给出样例供参考。
样例:
说明:依然是基于avue crud开发.而非官网给出的avue-form的样例.
我新建了一个案例表,对case表进行CRUD操作.
case.js:
{
"type": "input",
"label": "案例名称",
"prop": "name"
}, {
"type": "datetime",
"label": "应用时间",
"prop": "appDate",
"format": 'yyyy-MM-dd',
"valueFormat": 'yyyy-MM-dd HH:mm:ss',
}, {
"type": "input",
"label": "客户户对象",
"prop": "customer"
}, {
// "type": "ueditor",
"component": 'avueUeditor',
"label": "案例介绍",
"prop": "content",
"span": 24,
"action": "/scm/file/upload",
"data": {
"pid": "",
"type": ""
},
"propsHttp": {
"res": "data",
"url": "url"
},
"overHidden": true
}
相关配置可参考上表.
注意点:
- component 为"avueUeditor",这个发生了变化.
- 之前解析写在option配置项中,现在直接写action、data等配置属性;
- 之前解析上传后的props,现在改为propsHttp;
- data参数上传的bug已经修复,可以携带额外参数;
到这一步前端已完成。接来下写后端文件处理controller。
@PostMapping(value = "/upload", produces = MediaType.APPLICATION_PROBLEM_JSON_VALUE, consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
public R upload(@RequestPart("file") MultipartFile file, @RequestParam("pid") String pid, @RequestParam("type") String type) {
// 调用feign上传至OSS
R<Map<String, String>> ret = remoteFileService.uploadFile(file,/*业务参数*/);
// 中间业务过程
return ret;
}
实际前端上传完成后,请求响应如下:
注意:此处返回的json即为 propsHttp 中配置解析的内容。
我配置的res为data,url为url.然后wangeditor依据url去请求服务器服务资源。
后台需要增加一个下载图片的方法:
@GetMapping("/{bucket}/{fileName}")
public void file(@PathVariable String bucket, @PathVariable String fileName, HttpServletResponse response) {
sysFileService.getFile(bucket, fileName, response);
}
最终完成的效果图如下:因下载方法没有做缓存,每次到oss中获取,图片加载会慢一些。
希望本篇文章对各位有用哈~