Spring Boot+BootStrap fileInput 多图片上传

Posted 2020-12-25 边见众生，边见自己

一、依赖文件

<link rel="stylesheet" type="text/css" th:href="@{/js/bootstrap/css/bootstrap.css}">
<link rel="stylesheet" type="text/css" th:href="@{/js/bootstrap/fileinput/css/fileinput.css}">
<!-- 加入FileInput -->
<script th:src="@{/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/js/bootstrap/js/bootstrap.js}"></script>
<script th:src="@{/js/bootstrap/fileinput/js/fileinput.js}"></script>
<script th:src="@{/js/bootstrap/fileinput/js/zh.js}"></script>/*语言环境*/

 

二、表单

<form class="form" action="#" method="post" enctype="multipart/form-data"  id="pollutionForm">
    <!-- 注意事项：Input type类型为file class为样式 id随意 name随意  
         multiple（如果是要多图上传一定要加上，不加的话每次只能选中一张图）-->
    图片：<input type="file" class="file" id="img" multiple name="images"><br>
</form>

 

三、javascript代码

<script>/**/

    var imageData = []; //多图上传返回的图片属性接受数组  这里是因为我在做表单其他属性提交的时候使用，在这里我没有将别的input写出来

    $("#img").fileinput({
        language : \'zh\',
        uploadUrl : "/image/save-test",
        showUpload: true, //是否显示上传按钮
        showRemove : true, //显示移除按钮
        showPreview : true, //是否显示预览
        showCaption: false,//是否显示标题
        autoReplace : true,
        minFileCount: 0,
        uploadAsync: true,
        maxFileCount: 10,//最大上传数量
        browseOnZoneClick: true,
        msgFilesTooMany: "选择上传的文件数量 超过允许的最大数值！",
        enctype: \'multipart/form-data\',
        // overwriteInitial: false,//不覆盖已上传的图片
        allowedFileExtensions : [ "jpg", "png", "gif" ],
        browseClass : "btn btn-primary", //按钮样式
        previewFileIcon : "<i class=\'glyphicon glyphicon-king\'></i>"
    }).on("fileuploaded", function(e, data) {//文件上传成功的回调函数，还有其他的一些回调函数，比如上传之前...
        var res = data.response;
        console.log(res)
        imageData.push({
            "path": res.data.path,
            "date":res.data.date
        });
        console.log(imageData);
    });
</script>

 

四、后台代码

//图片类
import java.util.Date;

/**
 * 图片类
 */
public class Img {

    private String name;
    private String path;
    private Date date;

    public Img() {
    }

    public Img(String path, Date date) {
        this.path = path;
        this.date = date;
    }

    public Img(String name, String path, Date date) {
        this.name = name;
        this.path = path;
        this.date = date;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPath() {
        return path;
    }

    public void setPath(String path) {
        this.path = path;
    }

    public Date getDate() {
        return date;
    }

    public void setDate(Date date) {
        this.date = date;
    }

    @Override
    public String toString() {
        return "Img{" +
                "name=\'" + name + \'\\\'\' +
                ", path=\'" + path + \'\\\'\' +
                ", date=" + date +
                \'}\';
    }
}

//图片上传Controller
public class UploadController {

    //fileinput 其实每次只会上传一个文件  多图上传也是分多次请求,每次上传一个文件 所以不需要循环
@RestController
    //@RequestParam("images") 这里的images对应表单中name 然后MultipartFile 参数名就可以任意了
@RequestMapping(value = "/image/save-test",method = RequestMethod.POST)
    public UploadResponseData saveImg(@RequestParam("images") MultipartFile file) throws IOException {
        String pathname = "";
        String returnPath = "";
        if (!file.isEmpty()){
            String fileName = file.getOriginalFilename();
            File path = new File(ResourceUtils.getURL("classpath:").getPath());//获取Spring boot项目的根路径，在开发时获取到的是/target/classes/
            System.out.println(path.getPath());//如果你的图片存储路径在static下，可以参考下面的写法
            File uploadFile = new File(path.getAbsolutePath(), "static/images/upload/");//开发测试模式中 获取到的是/target/classes/static/images/upload/
            if (!uploadFile.exists()){
                uploadFile.mkdirs();
            }
            //获取文件后缀名
            String end = FilenameUtils.getExtension(file.getOriginalFilename());
            DateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSSS");
            //图片名称 采取时间拼接随机数
            String name = df.format(new Date());
            Random r = new Random();
            for(int i = 0 ;i < 3 ;i++){
                name += r.nextInt(10);
            }
            String diskFileName = name + "." +end; //目标文件的文件名
            pathname = uploadFile.getPath()+ "/" + diskFileName;
            System.out.println(pathname);
            returnPath = "images/upload/" + diskFileName;//这里是我自己做返回的字符串

            file.transferTo(new File(pathname));//文件转存
        }//UploadResponseData 自定义返回数据类型实体{int code, String msg, Object data}
        return new UploadResponseData(CodeEnum.SUCCESS.getCode(),MsgEnum.SUCCESS.getMsg(),new Img(returnPath,new Date()));
    }

}

 

五、总结吧

最后在这里想说一些问题

    1、spring boot路径获取问题：

     ResourceUtils.getURL("classpath:").getPath(); 在开发环境下获取到的是项目根路径/target/class/

             
             

             ResourceUtils.getURL("classpath: /static/images/upload/").getPath(); 测试失败

             File uploadFile = new File(path.getAbsolutePath(), "static/images/upload/"); 在开发环境下获取到的是/target/class/images/upload/

             在将项目打包位war包部署在tomcat之后，/target/class/ --> /WEB-INF/classes/,同理static/images/upload/ --> /WEB-INF/classes/static/images/upload/

         2、fileinput需要有返回参数 参数格式随意（不要太随意哈）

         3、一下子想不起来了，如果有会继续更

 

六、如果有错的地方，还请指出，谢谢了！