核心代码
urlconverter_callback: function(url, node, on_save, name) {
if (node === 'img' && url.startsWith('blob:')) {
tinymce.activeEditor && tinymce.activeEditor.uploadImages()
}
return url;
},
该代码的具体所在位置
data() {
return {
//初始化配置
init: {
//menubar: true, // 菜单栏显隐
//language_url: "@/components/tinymce/langs/zh_CN.js",
language_url: '../static/tinymce/langs/zh_CN.js', // vue-cli2.x
language: "zh_CN",
//skin_url: "@/components/tinymce/skins/ui/oxide",
skin_url: '../static/tinymce/skins/ui/oxide', // vue-cli2.x
content_css: 'src/assets/fonts/FZHei.css,src/assets/fonts/FZXBSJW.css',// vue-cli2.x
height: 630,
min_height: 570,
max_height: 970,
toolbar_mode: "wrap",
plugins: this.plugins,
toolbar: this.toolbar,
pasteAsPlainText: true,
content_style: "p {margin: 5px 0;} img {max-width:100%;}",
fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
font_formats:
"微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;小标宋=FZXiaoBiaoSong;方正黑体=FZHei,sans-serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
branding: false,
paste_data_images: true,
// 粘贴图片后自动上传
urlconverter_callback: function(url, node, on_save, name) {
if (node === 'img' && url.startsWith('blob:')) {
tinymce.activeEditor && tinymce.activeEditor.uploadImages()
}
return url;
},
// 图片上传
images_upload_handler: (blobInfo, success, failure) => {
// const img = 'data:image/jpeg;base64,' + blobInfo.base64()
// success(img)
const formData = new FormData()
formData.append('file', blobInfo.blob())
formData.append('biz', 'rich')
let url = config.configData.api_url + "/sys/common/uploadA";
utils.httpFile(url,formData).then((res) => {
console.log('===============',res.data);
let filePath = res.data.result.file;
success(filePath);
})
}
},
content: this.value
};
},
实现上传的前端代码
// 图片上传
images_upload_handler: (blobInfo, success, failure) => {
// const img = 'data:image/jpeg;base64,' + blobInfo.base64()
// success(img)
const formData = new FormData()
formData.append('file', blobInfo.blob())
formData.append('biz', 'rich')
let url = config.configData.api_url + "/sys/common/uploadA";
utils.httpFile(url,formData).then((res) => {
console.log('===============',res.data);
let filePath = res.data.result.file;
success(filePath);
})
}
java后端代码
@RequestMapping(value = "/upFiles", method = RequestMethod.POST)
public Result upFiles(HttpServletRequest request, HttpServletResponse response) {
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
String fileType = request.getParameter("fileType");
List result = new ArrayList<>();
Map fileMap = multipartRequest.getFileMap();
for (Map.Entry entity : fileMap.entrySet()) {
MultipartFile file = entity.getValue();// 获取上传文件对象
try {
String fileName = file.getOriginalFilename();
String newFile = "";
String path = uploadpath + "/" + fileType;
if (fileName.equals("blob")) {
newFile = UUID.randomUUID().toString().replace("-", "") + ".png";
} else {
String extName = fileName.substring(fileName.lastIndexOf("."));
newFile = UUID.randomUUID().toString().replace("-", "") + extName;
}
File dest = new File(new File(path).getAbsolutePath()+ "/" + newFile);
File dir = new File(path);
if (!dir.exists()) {
dir.mkdirs();
}
file.transferTo(dest); // 保存文件
result.add(fileType + File.separator + newFile);
} catch (Exception e) {
return Result.error("文件导入失败:" + e.getMessage());
}
}
if (result.size() > 0) {
return Result.OK(result);
} else {
return Result.error("文件导入失败!");
}
}