Spring Boot+BootStrap fileInput 多图片上传

一、依赖文件

<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}">

<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="file" id="img" multiple name="images"><br>
form>

 

三、JavaScript代码

 

四、后台代码

//图片类
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、一下子想不起来了，如果有会继续更

 

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

 

转载于:https://www.cnblogs.com/threadj/p/9382525.html