AVUE 富文本编辑器 avue-plugin-ueditor 图片上传 ver.0.2.7

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中获取，图片加载会慢一些。

希望本篇文章对各位有用哈~