流程并不复杂,直接上代码,代码中标有注释
前端代码在layui的官方文档中有,而且既然准备上传图片了,前端应该是没有问题了
<!--layedit文本区域-->
<label class="icon1 l_width">内 容:</label>
<div class="div2">
<textarea id="edit1" lay-verify="content" style="display: none;"></textarea>
</div>
layedit.set({
uploadImage: {
url: '' //接口url
,type: '' //默认post
}
});
//注意:layedit.set 一定要放在 build 前面,否则配置全局接口将无效。
layedit.build('demo'); //建立编辑器
后台:
pom文件中添加上传图片所需依赖
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.3</version>
</dependency>
springmvc配置文件中对上传文件的大小等进行控制
<!-- 配置文件解析器-->
<!-- 此处id为固定写法,不能随便取名-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSizePerFile" value="5242880"></property>
<property name="defaultEncoding" value="UTF-8"/>
<property name="resolveLazily" value="true"/>
</bean>
图片上传的控制类
package com.fh.experience.controller;
import com.fh.experience.entity.JsonResult;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;
@RestController
@Slf4j
public class ImageUploadController {
/**
* 时间格式化
*/
private SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy/MM/dd/");
/**
* 示例: D:/image/
*/
private String fileSavePath="D:/image/";
@PostMapping("/upload")
public JsonResult uploadFile(@RequestParam("file") MultipartFile file, HttpServletRequest request) {
//1.后半段目录: 2021/07/29即上传的年月日
if (file.isEmpty()) {
System.out.println("文件为空");
}
String directory = simpleDateFormat.format(new Date());
/**
* 2.文件保存目录 D:/image/2021/07/29/
* 如果目录不存在,则创建
*/
File dir = new File(fileSavePath + directory);
if (!dir.exists()) {
dir.mkdirs();
}
//3.给文件重新设置一个名字
//后缀
String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
String newFileName= UUID.randomUUID().toString().replaceAll("-", "")+suffix;
//4.创建这个新文件
File newFile = new File(fileSavePath + directory + newFileName);
//5.复制操作
try {
file.transferTo(newFile);
//协议 :// ip地址 :端口号 / 文件目录
String src = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/image/" + directory + newFileName;
Map<String, String> map = new HashMap<>();
map.put("src",src);
return JsonResult.builder().data(map).msg("上传成功!").code(0).build();
} catch (IOException e) {
return JsonResult.builder().data(null).msg("IO异常!").code(-1).build();
}
}
}
上述控制类中涉及到一个封装类
public class JsonResult implements Serializable {
private Integer code;
private String msg;
private Object data;
}
因为layui要求返回值必须是以下形式
{
"code": 0 //0表示成功,其它失败
,"msg": "" //提示信息 //一般上传失败后返回
,"data": {
"src": "图片路径"
,"title": "图片名称" //可选
}
}
以上写完后图片上传功能基本完成,但会发现图片上传成功后,前端图片无法回显,这就需要对资源路径进行映射。一般有修改tomcat中的serve.xml配置文件。这里直接在idea中进行设置。
1.打开tomcat配置
找到图片上传存储的位置,也就是上面上传控制类中的fileSavePath(D:image)目录。选择后apply-ok,重启tomcat即可