因为文章内容和文章标题，文章图片不方便在同一个form中，所以这里通过ajax传输数据

文件上传

html，这里使用的bootstrap

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h5 class="modal-title" id="myModalLabel">发布文章</h5></div><div class="modal-body container"><div class="row"><form><div class="row"><div class="col-xs-1"><label>文章标题</label></div><div class="col-xs-2"><input type="text" name="title" id="title1"></div></div><br><div class="row"><div class="col-xs-1"><label>文章分类</label></div><div class="col-xs-4"><select class="col-xs-4" style="width: 120px" id="select" name="category"><option>请选择博客分类</option><option th:each="category:${categoryList}" th:text="${category.categoryname}">vue</option></select></div></div><div class="row"><div class="col-xs-1"><label  style="margin-top: 10px">文章标签</label></div><div class="col-xs-4"><div><div class="checkbox" style="margin-right: 8px"><label><input type="checkbox" name="tag" value="spring">spring</label></div></div><div><div class="checkbox"><label><input type="checkbox"  name="tag" value="springboot">springboot</label></div></div></div><div class="row"><div class="col-xs-1"><label>文章首图</label></div><div class="col-xs-1"><input type="file" id="inputFile" name="file"></div></div><div class="row"><div class="col-xs-4"></div><div class="col-xs-2"><input type="button" onclick="addArticle()" class="btn btn-primary" value="发布文章"></div></div></form></div></div></div><!-- /.modal-content --></div><!-- /.modal -->
</div>

ajax 传输

    function addArticle() {var formdata = new FormData();formdata.append("file",$("#inputFile")[0].files[0])var category = $('#select').find("option:selected").text();var content = $("#content").text() //这里不能使用val()函数获取值,否则后端会报错，具体什么原因不太清楚var title = document.getElementById("title1").value//追加数据进formdata 键值对formdata.append("category",category);// formdata.append("tags",chk());  复选框未使用formdata.append("content",content);formdata.append("title",title);$.ajax({type:"post",url: '/article/test',data: formdata,contentType : false,processData : false,success : function(data) {if (data!=""){window.location.href="/article/articleList"}},error : function(){}})}

后端

//封装成实体类
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Upload {private String title;private String content;
//    private String tags;private String category;private MultipartFile file;
}

控制层

@Transactional@ResponseBody@RequestMapping("/test")public String test(Upload upload,Map map){//存储tagid//List<Integer> tagidList = new ArrayList<> ();//根据分类名获取分类idint categoryid = categoryService.findCategoryByName(upload.getCategory()).getId();MultipartFile file = upload.getFile();if(!file.isEmpty()){//图片的保存路径String uploadPath =System.getProperty("user.dir") + "/src/main/resources/templates/img";// 如果目录不存在则创建File uploadDir = new File(uploadPath);if (!uploadDir.exists()) {uploadDir.mkdir();}//获取原文件名String OriginalFilename = file.getOriginalFilename();//获取文件后缀名String suffixName = OriginalFilename.substring(OriginalFilename.lastIndexOf("."));//重新随机生成名字String filename = UUID.randomUUID().toString() +suffixName;File localFile = new File(uploadPath+"\\"+filename);try {//把上传的文件保存至本地file.transferTo(localFile);//操作数据库map.put("createdate",DateUtil.jtod(new Date()));map.put("adminid",redisUtils.hmget("user").get("userid"));map.put("content",upload.getContent());map.put("title",upload.getTitle());map.put("img","img/"+filename);int res = articleService.insert(map);int articleid = 0 ;if (res>0){articleid =  articleService.findArticleByTitle(upload.getTitle()).getId();}categoryService.artInsert(articleid,categoryid);//上传成功，返回保存的文件地址return filename;}catch (IOException e){e.printStackTrace();System.out.println("上传失败");return "error";}}else{System.out.println("文件为空");return "empty";}}

测试

数据库数据