springboot+ueditor1.4.33实现附件上传功能至本地
时间: 2023-11-11 20:07:41 浏览: 188
springboot整合百度富文本编辑器ueditor实现图片上传和文件上传以及回显.doc
实现Spring Boot和ueditor1.4.33的附件上传至本地的步骤如下:
1. 添加ueditor1.4.33的jar包依赖,在pom.xml中添加以下代码:
```xml
<dependency>
<groupId>com.baidu.ueditor</groupId>
<artifactId>ueditor</artifactId>
<version>1.4.3</version>
</dependency>
```
2. 配置ueditor,在resources目录下创建config.json文件,添加以下代码:
```json
{
"imageActionName": "uploadimage",
"imageFieldName": "upfile",
"imageMaxSize": 2048000,
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
"imageCompressEnable": true,
"imageCompressBorder": 1600,
"imageInsertAlign": "none",
"imageUrlPrefix": "",
"imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
"scrawlActionName": "uploadscrawl",
"scrawlFieldName": "upfile",
"scrawlPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
"scrawlMaxSize": 2048000,
"scrawlUrlPrefix": "",
"scrawlInsertAlign": "none",
"snapscreenActionName": "uploadimage",
"snapscreenPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
"snapscreenUrlPrefix": "",
"snapscreenInsertAlign": "none",
"catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
"catcherActionName": "catchimage",
"catcherFieldName": "source",
"catcherPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
"catcherUrlPrefix": "",
"catcherMaxSize": 2048000,
"catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
"videoActionName": "uploadvideo",
"videoFieldName": "upfile",
"videoPathFormat": "/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}",
"videoUrlPrefix": "",
"videoMaxSize": 102400000,
"videoAllowFiles": [
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"
],
"fileActionName": "uploadfile",
"fileFieldName": "upfile",
"filePathFormat": "/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}",
"fileUrlPrefix": "",
"fileMaxSize": 51200000,
"fileAllowFiles": [
".png", ".jpg", ".jpeg", ".gif", ".bmp",
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
],
"imageManagerActionName": "listimage",
"imageManagerListPath": "/ueditor/jsp/upload/image/",
"imageManagerListSize": 20,
"imageManagerUrlPrefix": "",
"imageManagerInsertAlign": "none",
"imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
"fileManagerActionName": "listfile",
"fileManagerListPath": "/ueditor/jsp/upload/file/",
"fileManagerUrlPrefix": "",
"fileManagerListSize": 20,
"fileManagerAllowFiles": [
".png", ".jpg", ".jpeg", ".gif", ".bmp",
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
]
}
```
3. 在Controller中添加上传附件的方法,例如:
```java
@Controller
@RequestMapping("/file")
public class FileController {
@PostMapping("/upload")
@ResponseBody
public Map<String, Object> uploadFile(HttpServletRequest request, HttpServletResponse response) {
// 获取配置文件路径
String rootPath = request.getSession().getServletContext().getRealPath("/");
String configPath = rootPath + "config.json";
// 创建配置对象
ConfigManager configManager = ConfigManager.getInstance(rootPath, "http://localhost:8080/ueditor/jsp");
try {
// 初始化配置
configManager.initEnv(configPath);
} catch (Exception e) {
e.printStackTrace();
return null;
}
// 创建上传对象
UEditorUploader uploader = new BinaryUploader(configManager, request, response);
// 执行上传
Map<String, Object> result = uploader.doExec();
return result;
}
}
```
4. 在前端页面中使用ueditor上传附件,例如:
```html
<!-- 加载ueditor -->
<script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
<!-- 创建ueditor实例 -->
<script type="text/javascript">
var ue = UE.getEditor('editor');
</script>
<!-- 创建上传按钮 -->
<div class="btn btn-primary" onclick="chooseFile()">上传文件</div>
<!-- 上传文件 -->
<script type="text/javascript">
function chooseFile() {
// 创建表单对象
var formData = new FormData();
// 获取文件对象
var file = document.getElementById("file").files[0];
// 添加文件到表单中
formData.append("upfile", file);
// 发送ajax请求
$.ajax({
url: "/file/upload",
type: "POST",
data: formData,
cache: false,
contentType: false,
processData: false,
success: function (result) {
if (result.state === "SUCCESS") {
// 上传成功,将附件地址添加到ueditor中
ue.execCommand('insertHtml', '<a href="' + result.url + '">' + result.title + '</a>');
} else {
alert("上传失败");
}
}
});
}
</script>
```
以上就是实现Spring Boot和ueditor1.4.33的附件上传至本地的完整步骤。
阅读全文