diff --git a/src/main/java/com/root2z/controller/admin/AdminArticleController.java b/src/main/java/com/root2z/controller/admin/AdminArticleController.java
index 7b8c1c6..d9ea5d2 100644
--- a/src/main/java/com/root2z/controller/admin/AdminArticleController.java
+++ b/src/main/java/com/root2z/controller/admin/AdminArticleController.java
@@ -7,14 +7,17 @@
import com.root2z.service.ArticleService;
import com.root2z.service.CategoryService;
import com.root2z.service.TagService;
+import com.root2z.utils.AliyunOSSUtil;
import com.root2z.utils.ResultUtil;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
+import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;
+import javax.annotation.Resource;
import java.util.HashMap;
import java.util.Map;
@@ -22,6 +25,8 @@
@RequestMapping("/admin")
public class AdminArticleController {
+ @Resource private AliyunOSSUtil aliyunOSSUtil;
+
private final Logger logger = LoggerFactory.getLogger(AdminArticleController.class);
private final CategoryService categoryService;
@@ -145,4 +150,15 @@ public ResultVO changeStatus(
}
return ResultUtil.error("更改文章状态失败!", null);
}
+
+ @RequestMapping(value = "/article/upload", method = RequestMethod.POST)
+ @ResponseBody
+ public ResultVO MarkdownUploadImage(@RequestParam("editormd-image-file") MultipartFile file) {
+ String url = aliyunOSSUtil.uploadFile(file, "");
+ if (url != null) {
+ return ResultUtil.success("图片上传成功", url);
+ } else {
+ return ResultUtil.error("图片上传失败", null);
+ }
+ }
}
diff --git a/src/main/java/com/root2z/utils/AliyunOSSUtil.java b/src/main/java/com/root2z/utils/AliyunOSSUtil.java
index 5b9f14b..4328f92 100644
--- a/src/main/java/com/root2z/utils/AliyunOSSUtil.java
+++ b/src/main/java/com/root2z/utils/AliyunOSSUtil.java
@@ -1,7 +1,6 @@
package com.root2z.utils;
import com.aliyun.oss.ClientBuilderConfiguration;
-import com.aliyun.oss.ClientConfiguration;
import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.aliyun.oss.model.ObjectMetadata;
diff --git a/src/main/java/com/root2z/utils/FileUtils.java b/src/main/java/com/root2z/utils/FileUtils.java
index d511446..3218a41 100644
--- a/src/main/java/com/root2z/utils/FileUtils.java
+++ b/src/main/java/com/root2z/utils/FileUtils.java
@@ -8,14 +8,12 @@
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Random;
-import java.util.UUID;
public class FileUtils {
/**
* @param file 文件
* @param fileName 保存的文件名
- * @return
*/
public static String upload(MultipartFile file, String fileName) {
@@ -35,10 +33,7 @@ public static String upload(MultipartFile file, String fileName) {
// 保存文件
file.transferTo(dest);
return randomFileName;
- } catch (IllegalStateException e) {
- e.printStackTrace();
- return "";
- } catch (IOException e) {
+ } catch (IllegalStateException | IOException e) {
e.printStackTrace();
return "";
}
@@ -47,22 +42,19 @@ public static String upload(MultipartFile file, String fileName) {
/**
* 生成随机文件名
*
- * @return
+ * @param fileName 文件名
*/
public static String getRandomFileName(String fileName) {
-
// 获取后缀
String suffixName = fileName.substring(fileName.lastIndexOf("."));
-
SimpleDateFormat simpleDateFormat;
simpleDateFormat = new SimpleDateFormat("yyyyMMdd");
Date date = new Date();
+ // 获得当前时间
String datetime = simpleDateFormat.format(date);
Random random = new Random();
+ // 提取时间
int randNum = (int) (random.nextDouble() * (9999 - 1000 + 1)) + 10000;
-
- String finaName = randNum + datetime + suffixName;
-
- return finaName;
+ return randNum + datetime + suffixName;
}
}
diff --git a/src/main/resources/templates/admin/article/add.html b/src/main/resources/templates/admin/article/add.html
index 7f45297..a69d3f4 100644
--- a/src/main/resources/templates/admin/article/add.html
+++ b/src/main/resources/templates/admin/article/add.html
@@ -164,12 +164,103 @@ 新增博客
tex: true, // 开启数学公式
flowChart: true, // 开启流程图支持
sequenceDiagram: true, // 开启时序图支持
- saveHTMLToTextarea: true // 保存HTML到textarea
+ saveHTMLToTextarea: true, // 保存HTML到textarea
+ imageUpload: true,
+ imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
+ imageUploadURL: contextPath + "/admin/article/upload",
+ onload: function () {
+ initPasteDragImg(this);
+ }
});
// 固定工具栏
contentEditor.setToolbarAutoFixed(true);
});
+ /**
+ * 初始化粘贴图片函数
+ * @param Editor
+ */
+ function initPasteDragImg(Editor) {
+ let doc = document.getElementById(Editor.id);
+ doc.addEventListener('paste', function (event) {
+ let items = (event.clipboardData || window.clipboardData).items;
+ let file = null;
+ if (items && items.length) {
+ // 搜索剪切板items
+ for (let i = 0; i < items.length; i++) {
+ if (items[i].type.indexOf('image') !== -1) {
+ file = items[i].getAsFile();
+ break;
+ }
+ }
+ } else {
+ Swal.fire({
+ title: "当前浏览器不支持",
+ icon: "error"
+ })
+ return;
+ }
+ if (!file) {
+ Swal.fire({
+ title: "粘贴内容非图片",
+ icon: "error"
+ });
+ return;
+ }
+ uploadImg(file, Editor);
+ });
+ let dashboard = document.getElementById(Editor.id);
+ dashboard.addEventListener("dragover", function (e) {
+ e.preventDefault()
+ e.stopPropagation()
+ })
+ dashboard.addEventListener("dragenter", function (e) {
+ e.preventDefault()
+ e.stopPropagation()
+ })
+ dashboard.addEventListener("drop", function (e) {
+ e.preventDefault()
+ e.stopPropagation()
+ let files = this.files || e.dataTransfer.files;
+ uploadImg(files[0], Editor);
+ })
+ }
+
+ function uploadImg(file, Editor) {
+ let formData = new FormData();
+ let fileName = new Date().getTime() + "." + file.name.split(".").pop();
+ formData.append('editormd-image-file', file, fileName);
+ $.ajax({
+ url: Editor.settings.imageUploadURL,
+ type: 'post',
+ data: formData,
+ processData: false,
+ contentType: false,
+ dataType: 'json',
+ success: function (data) {
+ let code = data.code
+ if (200 === code) {
+ Swal.fire({
+ title: data.message,
+ icon: "success"
+ })
+ let url = data.data
+ console.log(data);
+ if (/\.(png|jpg|jpeg|gif|bmp|ico)$/.test(url)) {
+ Editor.insertValue("![](" + url + ")");
+ } else {
+ Editor.insertValue("[下载附件](" + url + ")");
+ }
+ } else {
+ Swal.fire({
+ title: data.message,
+ icon: "error"
+ })
+ }
+ }
+ });
+ }
+
$('#addArticle').click(function () {
let article = document.getElementById("newArticle");
let formData = new FormData(article);
diff --git a/src/main/resources/templates/admin/article/edit.html b/src/main/resources/templates/admin/article/edit.html
index 482afb5..fc5c5b2 100644
--- a/src/main/resources/templates/admin/article/edit.html
+++ b/src/main/resources/templates/admin/article/edit.html
@@ -174,12 +174,97 @@ 编辑文章
tex: true, // 开启数学公式
flowChart: true, // 开启流程图支持
sequenceDiagram: true, // 开启时序图支持
- saveHTMLToTextarea: true // 保存HTML到textarea
+ saveHTMLToTextarea: true, // 保存HTML到textarea
+ imageUpload: true,
+ imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
+ imageUploadURL: contextPath + "/admin/article/upload",
+ onload: function () {
+ initPasteDragImg(this);
+ }
});
// 固定工具栏
contentEditor.setToolbarAutoFixed(true);
});
+ /**
+ * 初始化粘贴图片函数
+ * @param Editor
+ */
+ function initPasteDragImg(Editor) {
+ let doc = document.getElementById(Editor.id);
+ doc.addEventListener('paste', function (event) {
+ let items = (event.clipboardData || window.clipboardData).items;
+ let file = null;
+ if (items && items.length) {
+ // 搜索剪切板items
+ for (let i = 0; i < items.length; i++) {
+ if (items[i].type.indexOf('image') !== -1) {
+ file = items[i].getAsFile();
+ break;
+ }
+ }
+ } else {
+ console.log("当前浏览器不支持");
+ return;
+ }
+ if (!file) {
+ console.log("粘贴内容非图片");
+ return;
+ }
+ uploadImg(file, Editor);
+ });
+ var dashboard = document.getElementById(Editor.id)
+ dashboard.addEventListener("dragover", function (e) {
+ e.preventDefault()
+ e.stopPropagation()
+ })
+ dashboard.addEventListener("dragenter", function (e) {
+ e.preventDefault()
+ e.stopPropagation()
+ })
+ dashboard.addEventListener("drop", function (e) {
+ e.preventDefault()
+ e.stopPropagation()
+ var files = this.files || e.dataTransfer.files;
+ uploadImg(files[0], Editor);
+ })
+ }
+
+ function uploadImg(file, Editor) {
+ let formData = new FormData();
+ let fileName = new Date().getTime() + "." + file.name.split(".").pop();
+ formData.append('editormd-image-file', file, fileName);
+ $.ajax({
+ url: Editor.settings.imageUploadURL,
+ type: 'post',
+ data: formData,
+ processData: false,
+ contentType: false,
+ dataType: 'json',
+ success: function (data) {
+ let code = data.code
+ if (200 === code) {
+ Swal.fire({
+ title: data.message,
+ icon: "success"
+ })
+ let url = data.data
+ console.log(data);
+ if (/\.(png|jpg|jpeg|gif|bmp|ico)$/.test(url)) {
+ Editor.insertValue("![](" + url + ")");
+ } else {
+ Editor.insertValue("[下载附件](" + url + ")");
+ }
+ } else {
+ Swal.fire({
+ title: data.message,
+ icon: "error"
+ })
+ }
+ }
+ });
+ }
+
$('#saveArticle').click(function () {
let article = document.getElementById("editArticle");
let formData = new FormData(article);