百度富文本编辑器---ueditor，ssm，jsp实现cos云端的上传
1、首先到官网下载：http://ueditor.baidu.com/website/download.html
下载后，目录结构为：见下图（java代码暂时不贴图，这里涉及不到）
2、改动jsp页面，编辑器的代码：
var ue = UE.getEditor('add-content');
// var ue = UE.getEditor('add-content',{initialFrameHeight: 500,initialFrameWidth:800,maximumWords:3000,elementPathEnabled:false});
// 复写UEDITOR的getActionUrl 方法,定义自己的Action
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage' || action == 'uploadscrawl'
|| action == 'uploadvideo' || action == 'uploadfile') {
return '<%=request.getContextPath() %>/system/file/upload';
} else {
return this._bkGetActionUrl.call(this, action);
}
};
//复写UEDITOR的getContentLength方法 解决富文本编辑器中一张图片或者一个文件只能算一个字符的问题,可跟数据库字符的长度配合使用
UE.Editor.prototype._bkGetContentLength = UE.Editor.prototype.getContentLength;
UE.Editor.prototype.getContentLength = function(){
return this.getContent().length;
}
3、上传接口以及工具类（如下）：
@RestController
@RequestMapping("/system/file")
public class FileUploadController {
@Autowired
private UploadCOSUtil uploadCOSUtil;
/**
*
* ueditor（百度富文本编辑器）文件上传
* @param upfile
* @return
* @throws
* @other: (注意事项)
*
* @author: zhaoGq
* @date: 2019-12-20 15:43:01
*/
@RequestMapping(value="/upload",method=RequestMethod.POST)
public Map<String, String> upload(MultipartFile upfile){
return uploadCOSUtil.uploadFileTXcos(upfile);
}
@Component
public class UploadCOSUtil {
/**
*
* 上传文件
* @param file
* @return
* @throws
* @other: (注意事项)
*
* @author: zhaoGq
* @date: 2019-12-20 16:24:11
*/
public Map<String, String> uploadFileTXcos(MultipartFile file) {
Map<String, String> result = new HashMap<String, String>();
if(file == null){
result.put("state", "文件为空");
result.put("url", "");
result.put("title", "");
result.put("original", "");
return result;
}
String oldFileName = file.getOriginalFilename();
String eName = oldFileName.substring(oldFileName.lastIndexOf("."));
String newFileName = new Date().getTime() + eName;
Calendar cal = Calendar.getInstance();
int year = cal.get(Calendar.YEAR);
int month = cal.get(Calendar.MONTH) + 1;
int day = cal.get(Calendar.DATE);
CosUtil cosUtil = new CosUtil();
COSClient cosclient = cosUtil.getTXcosClient();
// bucket的命名规则为{name}-{appid} ，此处填写的存储桶名称必须为此格式
String bucketName = Global.TXCLOUD_BUCKETNAME;
// 简单文件上传, 最大支持 5 GB, 适用于小文件上传, 建议 20 M 以下的文件使用该接口
// 大文件上传请参照 API 文档高级 API 上传
File localFile = null;
try {
localFile = File.createTempFile("temp",null);
file.transferTo(localFile);
// 当前用户所属区域
// Integer districtId = 1;
// 指定要上传到 COS 上的路径
// String key = "/"+Global.TXCLOUD_NEWS_PREFIX+ "/district-"+districtId +"/"+year+"/"+month+"/"+day+"/"+newFileName;
String key = "/"+Global.TXCLOUD_NEWS_PREFIX +"/"+year+"/"+month+"/"+day+"/"+newFileName;
PutObjectRequest putObjectRequest = new PutObjectRequest(bucketName, key, localFile);
@SuppressWarnings("unused")
PutObjectResult putObjectResult = cosclient.putObject(putObjectRequest);
String filePath = Global.TXCLOUD_PATH + putObjectRequest.getKey();
result.put("state", "SUCCESS"); // UEDITOR的规则:不为SUCCESS则显示state的内容
result.put("url", filePath); // 能访问到你现在图片的路径
result.put("title", newFileName);
result.put("original", newFileName);
return result;
} catch (IOException e) {
result.put("state", "ERROR");
result.put("url", "");
result.put("title", "");
result.put("original", "");
System.out.println(">>>>>>>>" + e.getMessage());
return result;
} finally {
// 关闭客户端(关闭后台线程)
cosclient.shutdown();
}
}
}
完成即可实现
附：
/**
*
* 获取腾讯云cos客户端
* @return
* @throws
* @other: (注意事项：填写自己相应的参数值，cos)
*
* @author: zhaoGq
* @date: 2019-11-01 09:23:11
*/
public COSClient getTXcosClient () {
// 1 初始化用户身份信息(secretId, secretKey)
COSCredentials cred = new BasicCOSCredentials(Global.TXCLOUD_SECRETID, Global.TXCLOUD_SECRETKEY);
// 2 设置bucket的区域, COS地域的简称请参照 https://cloud.tencent.com/document/product/436/6224
ClientConfig clientConfig = new ClientConfig(new Region(Global.TXCLOUD_BUCKET));
// 3 生成cos客户端
COSClient cosclient = new COSClient(cred, clientConfig);
return cosclient;
}