文件上传+SpringMVC+富文本编辑器
# 文件上传+SpringMVC+富文本编辑器
# 1、基本思路
在富文本中，选择图片后，直接使用ajax完成图片的上传，上传成功之后，我们在页面上获取图片的路径。将路劲信息和富文本的信息，再统一提交。
# 2、前提准备
在SpringMVC配置文件中定义一个bean 类型为CommonsMultipartResolver
在SpringMVC中专门封装了一个类CommonsMultipartResolver来处理文件上传，所以需要在 SpringMVC的配置件中加入一个bean;配置bean的代码如下：
<!--文件上传-->
<!--加入一个bean用来处理文件上传，这里采用的是commons-fileupload:commons-fileupload:1.4-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
</bean>
1
2
3
4
5
2
3
4
5
# 3、具体步骤
# 步骤一：导入所需Jar文件
<!-- 文件上传 commons-fileupload -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.4</version>
</dependency>
<!-- 文件上传 commons-io -->
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.6</version>
</dependency>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 步骤二：使用tinymce富文本编辑器
<!--layui-tinymce富文本编辑器-->
<div class="layui-card-body">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
<legend>文章内容</legend>
</fieldset>
<textarea id="edit" cols="30" rows="10" name="article_content"></textarea>
<div class="layui-btn-group" style="margin-top: 10px">
<button class="layui-btn" lay-submit lay-filter="form-fabu">发布</button>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<!--Layui富文本编辑器-->
<script>
layui.use(['tinymce', 'form', 'jquery'], function () {
let form = layui.form;
let $ = layui.jquery;
//富文本编辑器
var tinymce = layui.tinymce
var edit = tinymce.render({
elem: "#edit",
//配置上传接口
images_upload_url: '../../../../file/upload2',
form: {
//配置上传文件的字段名称
name: 'file',
},
height: 400,
});
//获取文本框中的值
edit.getContent();
console.log(edit.getContent());
// 数据提交（../../../../admin/addarticle）
form.on('submit(form-fabu)', function (data) {
//将文本框内的值赋值给data.field.article_content
data.field.article_content = edit.getContent()
console.log(data.field.article_content)
let roleIds = "";
$('input[type=checkbox]:checked').each(function () {
roleIds += $(this).val() + ",";
});
roleIds = roleIds.substr(0, roleIds.length - 1);
data.field.roleIds = roleIds;
console.log(data.field);
$.ajax({
url: '../../../../admin/addarticle',
data: JSON.stringify(data.field),
dataType: 'json',
contentType: 'application/json',
type: 'post',
success: function (result) {
if (result.success) {
layer.msg(result.msg, {icon: 2, time: 1000});
} else {
layer.msg(result.msg, {icon: 1, time: 1000});
}
}
})
return false;
});
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
# 步骤三、自定义AjaxUploadResponse响应体
@Data
@AllArgsConstructor
@NoArgsConstructor
public class AjaxUploadResponse<T> {
private int code = 0;
private String msg = "";
private String data = "";
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 步骤四、编写文件上传控制器
@RestController
@RequestMapping("/file")
public class FileController {
@PostMapping("/upload1")
public AjaxUploadResponse uploadfile(@RequestParam("file") Part file, HttpServletRequest request) {
// 文件名
System.out.println("文件名" + file.getContentType());
// 将file上传到服务器的指定位置（webapp下的某个目录）
String realPath = request.getRealPath("/");
System.out.println("realPath:" + realPath);
String fileName = (realPath + "/img/" + file.getSubmittedFileName());
try {
file.write(fileName);
} catch (IOException e) {
e.printStackTrace();
}
AjaxUploadResponse uploadResponse = new AjaxUploadResponse(0, "上传成功", "/img/" + file.getSubmittedFileName());
return uploadResponse;
}
@PostMapping("upload2")
public AjaxUploadResponse uploadfile(@RequestParam("file") MultipartFile file, HttpServletRequest request) {
// 文件类型
System.out.println(file.getContentType());
// 文件名
System.out.println(file.getOriginalFilename());
// 将file上传到服务器的指定位置（webapp下的某个目录）
String realPath = request.getRealPath("/");
System.out.println("realPath:" + realPath);
File dest = new File(realPath+"/img/"+file.getOriginalFilename());
try {
file.transferTo(dest);
} catch (IOException e) {
e.printStackTrace();
}
AjaxUploadResponse uploadResponse = new AjaxUploadResponse(0, "上传成功", "/img/" + file.getOriginalFilename());
return uploadResponse;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
# 步骤五、实现文章新增功能
# 1、Dao层
@Override
public boolean addArticle(ArticleEntity article) {
String sql = "INSERT INTO g_article VALUES (NULL,?,?,'imgtest.jpg','悟空网',?,0,NOW(),0)";
return DBUtil.exUpdate(sql, article.getArticle_title(), article.getArticle_content(), article.getActicle_type()) > 0;
}
1
2
3
4
5
2
3
4
5
# 2、Service层
@Override
public boolean addArticle(ArticleEntity article) {
return articleDao.addArticle(article);
}
1
2
3
4
2
3
4
# 3、Controller层
@PostMapping("/addarticle")
public AjaxOperateResponse addArticle(@RequestBody ArticleEntity article) {
AjaxOperateResponse response = new AjaxOperateResponse(200, articleService.addArticle(article) ? "增加成功" : "增加失败");
return response;
}
1
2
3
4
5
2
3
4
5
# 4、AjaxOperateResponse
@Data
@AllArgsConstructor
@NoArgsConstructor
public class AjaxOperateResponse<T> {
private int code = 0;
private String msg;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 步骤六、最终运行效果
图片上传成功：
文章内容新增成功：
数据库添加成功：
编辑 (opens new window)