第12章[12.10.1] Ext JS + CKEditor+Spring Boot 实现编辑器图片上传| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

第12章[12.10.1] Ext JS + CKEditor+Spring Boot 实现编辑器图片上传

CKEdito「支持多种图片上传实现方式，可以宜接使用CKEditor提供的云服务，不过这个服务是收费的，而且上传的图片如果安全性要求 较高，该方式可能不适合。本篇基于Spring Boot实现自定义的后端服务实现图片上传。
前端:在编辑器中指定图片服务地址
在创建编辑器对象时増加ckfinder配置,通过uploadUrl属性指定上传图片的处理地址
   
       ClassicEditor.create(document.queryselector('#' + this.getld()),	复制
        {
        ckfinder: { uploadUrl: 'XXX,
        }
        )).then(newEditor => {
        rae.editor = newEditor;
        })；

后端:图片上传服务实现
这里使用Spring Boot实现图片上传，关于Spring Boo反件上传的实现可以参考。
Spring Boot文件上传功能实现与简单示例
这里上传图片和上传文件实现是类似的，需要注意的是：
• CKEdito编辑器上传文件的参数名是-upload"
.需要返回JSON格式的数据，内容格式如下：

1 | {uploaded:true,url:''}
-uploaded,	布尔类型，用于判断是否上传成功
-url上传成功后的图片地址。
示例
1.这里使用http://localhost:8080/ckeditor/uploadimage作为图片上传服务的地址：
2.图片文件上传到Spring Boot 的「esou「ces\static的uploadimages 目录下；
3.这样的话就可以通过http:〃localhost:8080/static/uploadimages/xxx.jpg类似的地址访问
在上传图片的处理中:为了避免上传的原图片名包含特殊字符等,统一是哟个UUID命名新的文件名。代码类似:

@Req uestMapping("/upload image")
    @ResponseBody
    public CkEditorUploadResp uploadImage(@RequestParam(name = "upload")MultipartFile file) {
    CkEditorUploadResp resp = new CkEditorUploadResp。；
    String fullFileName = file.getOriginalFilename();
    String fileExtension = StringUtils.unqualify(fullFileName);
    String sfileDestPath = Thread.currentThread().getContextClassLoader().getResource(*'").getPath() + "staticM+F File destFolder = new File(sfileDestPath);
    if(!destFolder.exists()) { destFolder.mkdir();
    }
    String uuid = UUID.randomUUID().toString();
    String destFullFileName = uuid+"."+fileExtension;
    String destFilePath = sfileDestPath + File.separator+destFullFileName;
    File descFile = new File(destFilePath);
    try {
    if (!descFile.exists()) {
    descFile.createNewFile();
    )
    InputStream in = file.getInputStrearn();
    FileOutputStream out = new FileOutputStream(descFile);
    int n = 0;
    byte[] b = new byte[1024];
    while ((n = in.read(b)) != -1) { out.write(b, 0, n);
    }
    out.close();
    in. close。；
    } catch (Exception e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
    }
    resp.setUploaded(true);
    resp.setUrl("http://localhost:8080/static/uploadimages/"+destFullFileName);
    return resp;
示例代码地址
https://github.com/osxm/demoworkspace/tree/master/spring/springboot

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

第12章[12.10.1] Ext JS + CKEditor+Spring Boot 实现编辑器图片上传

网站导航