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

Ext JS开发大全

CmsWing

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

## Ext JS + CKEditor+Spring Boot 实现编辑器图片上传
CKEditor 支持多种图片上传实现方式， 可以直接使用CKEditor 提供的云服务，不过这个服务是收费的， 而且上传的图片如果安全性要求较高，该方式可能不适合。本篇基于Spring Boot实现自定义的后端服务实现图片上传。
### 前端: 在编辑器中指定图片服务地址
在创建编辑器对象时,增加ckfinder配置, 通过uploadUrl属性指定上传图片的处理地址

```javascript
ClassicEditor.create(document.querySelector('#' + this.getId()),   
	{	          
	ckfinder: {	        
	uploadUrl: 'XXX'          
	}            	
	}).then(newEditor => { 
	me.editor = newEditor;
});
```

### 后端: 图片上传服务实现
这里使用Spring Boot实现图片上传， 关于Spring Boot文件上传的实现可以参考。
Spring Boot 文件上传功能实现与简单示例
这里上传图片和上传文件实现是类似的， 需要注意的是：
CKEditor编辑器上传文件的参数名是 “upload”
需要返回JSON格式的数据，内容格式如下：
{uploaded:true,url:''}
1
－　uploaded，　布尔类型，　用于判断是否上传成功
　－　url　上传成功后的图片地址。
### 示例
这里使用 http://localhost:8080/ckeditor/uploadimage 作为图片上传服务的地址,
图片文件上传到Spring Boot 的resources\static的uploadimages目录下,
这样的话就可以通过http://localhost:8080/static/uploadimages/xxx.jpg类似的地址访问
在上传图片的处理中, 为了避免上传的原图片名包含特殊字符等, 统一是哟个UUID命名新的文件名。 代码类似：
```java
@RequestMapping("/uploadimage")
@ResponseBody	
public CkEditorUploadResp uploadImage(@RequestParam(name = "upload")MultipartFile file) {		CkEditorUploadResp  resp = new CkEditorUploadResp();	
	String fullFileName = file.getOriginalFilename();		
	String fileExtension = StringUtils.unqualify(fullFileName);		
  StringsfileDestPath=Thread.currentThread().getContextClassLoader().getResource("").getPath() + "static"+File.separator+"uploadimages";		
  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.getInputStream();		
  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开发大全

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

网站导航