文件上传ajax

因为文章内容和文章标题，文章图片不方便在同一个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<> ();
        //根据分类名获取分类id
        int 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";
        }
    }

测试

数据库数据