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

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

评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sword_happy

您的鼓励亦是我创作的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值