springboot 三个文件一起上传 springboot单文件上传

背景

在我们的项目开发中会遇到选择图片上传的功能，有时候我们还需要把选择的本地的图片显示到html页面中
但是我们会发现我们客户在使用的时候，并不是第一次选择的图片就会上传，而是在显示后觉得不满意，又重新选择另外的图片
因为某些不知名原因有时候我们测试时选择的本地图片不能够通过img标签显示出来，百度说是springboot需要使用流的方式
返回到html页面进行显示，我最终选择了将选择未确定上传的图片保存到服务器端，保存到服务器端的好处就是，当服务器重启
之后，我们保存的图片就会清除，类似于缓存过了最大有效时间。然后确定上传时则是把图片文件保存到项目工程的静态资源下永久保存；

那么下面我们先后来阐述
上传图片到服务器端（暂时）+显示 & 上传图片到项目工程目录（永久）+多文件上传到项目工程

其实springboot中上传文件和在springmvc中上传的方式基本一致，没多大区别，当然在springboot没多少配置，更加简单一点。

一、在application.yml中加入两行配置，因为springboot默认上传的单个文件大小限制为1M

（可选择不加）

#上传文件总的最大值
  servlet:
    multipart:
      max-request-size: 100MB
  #单个文件的最大值(注：springboot默认的文件大小限制为1M)
      max-file-size: 5MB

二、创建一个springboot工程具体不展示 只展示有关文件上传的部分

我们先在static目录下创建一个img目录
此处我们解释一下springboot工程中resource/static和target/classes/static的区别和联系
resource/static：用于存放静态资源文件 如图片、css文件、js文件、json文件等
target/classes/static：是存放我们项目工程编译成功后的文件，执行maven install或者maven package命令的时候 该target目录下会自动生成的相应的文件
所以我当我们将文件保存到resource/static/中时，target/classes/static中也会自动生成一模一样的
反过来我们将文件保存到target/classes/static目录下时，也可以通过resource/static/的目录访问到它

三、上传图片到服务器端+显示

1、html

<form id="form1" action="/add"  method="post"  enctype="multipart/form-data" >
<img src="/img/add.png"  width="150px" height="100px"class="imgs" id="imgs" onclick="file.click()" >
选择图片：<input type="file" id="file" name="fileUpload" style="display:none" onchange="up(this.id)"/>
 <button class="but_save" type="submit">保存</button>
</form>

不点击submit 点击图片“+”触发的是up函数ajax异步请求，将选择文件保存至服务器端
2、js

function up(id)
    {
          //获取表单中文件数据
        var  formdata=new FormData($("#form1")[0]);
        $.ajax({
            type:'post',
            url:'/uploadTomcat',
            processData:false,
            contentType:false,
            cache: false,//设置为 false 将不会从浏览器缓存中加载请求信息
            async: false,
            data:formdata,
            success:function(data)
            {
                //显示图片 
                  $("#imgs").attr("src","/img"+data);
            },
            error:function (data) {
                alert("未知错误");
            }
        });
    }

3、controller

//MultipartFile 用于接收文件数据
  //保存图片到服务器
    //处理文件上传
    @ResponseBody
    @RequestMapping(value="/uploadTomcat", method = RequestMethod.POST)
    public String uploadImg(MultipartFile fileUpload, HttpServletRequest request) {
        //设置文件上传路径  获取到是服务里的static/img目录路径
        String filePath = request.getSession().getServletContext().getRealPath("/img");
        //获取原始文件名
        String fileName = fileUpload.getOriginalFilename();
        //获取文件后缀名
        String suffixName = fileName.substring(fileName.lastIndexOf("."));
        //重新生成文件名  拼接新文件前缀名和后缀名
        String fileNames = UUID.randomUUID()+suffixName;
        try {
           //保存文件到指定目录
            FileUtil.uploadFile(fileUpload.getBytes(), filePath, fileNames);
           //返回的是新的文件名到ajax
            return fileNames;
        } catch (Exception e) {
            return "上传失败";
        }
    }

4、FileUtil 工具类

public class FileUtil {

    //用于存储服务器
    public static void uploadFile(byte[] file, String filePath, String fileName) throws Exception {
        File targetFile = new File(filePath);
        if(!targetFile.exists()){
            targetFile.mkdirs();
        }
        FileOutputStream out = new FileOutputStream(filePath+fileName);
        out.write(file);
        out.flush();
        out.close();
    }
	｝

这样文件就保存到服务器端了，但是在项目工程中看不到该文件存在

四、上传图片到项目工程目录显示

1、html
跟上面一样

<form id="form1" action="/add" method="post"  enctype="multipart/form-data" >
<img src="/img/add.png"  width="150px" height="100px"class="imgs" id="imgs" onclick="file.click()" >
选择图片：<input type="file" id="file" name="fileUpload" style="display:none" onchange="up(this.id)"/>
 <button class="but_save" type="submit">保存</button>
</form>

在选择完图片回显之后（即上面的保存服务器回显） 点击submit保存 触发的是action="/add" 添加图片到项目工程中

2、controller

@RequestMapping(value = "/add", method = RequestMethod.POST)
    @Transactional
    public String add(MultipartFile fileUpload, HttpServletRequest request) throws RuntimeException, FileNotFoundException {
      
       //获取文件名
        String fileName = fileUpload.getOriginalFilename();
        //获取文件后缀名
        String suffixName = fileName.substring(fileName.lastIndexOf("."));
        //重新生成文件名
        String fileNames = UUID.randomUUID()+suffixName;
        //获取/target/classes/static/img目录  如/C:/Users/Administrator/IdeaProjects/dubbo-hotels/admin-customer/target/classes/static/img
        String staticPath = ClassUtils.getDefaultClassLoader().getResource("static/img").getPath();
        System.out.println(staticPath);
        //去除去掉 /C:/Users/  左边第一个/  才符合保存文件的格式
        String path1=staticPath.substring(1, staticPath.length());
        System.out.println(path1);


        //拼接保存文件的目录+文件名
        String upPath=staticPath+"/"+fileNames;
        //指定本地文件夹存储图片
        try {
            //将图片保存到static文件夹里
           fileUpload.transferTo(new File(upPath));
            return fileNames;
        } catch (Exception e) {
            e.printStackTrace();
            return "false";
        }
    }

保存后可在此处查看保存的图片

五、多文件上传

html

form action="return false" enctype="multipart/form-data" method="post" id="form2" >
<input type="file" id="file1" name="fileUpload"  />
<input type="file" id="file2" name="fileUpload"  />
<input type="file" id="file3" name="fileUpload"   />
<input type="file" id="file4" name="fileUpload"  />
<input type="file" id="file5" name="fileUpload"  />
  <button class="but_save" type="submit" onclick="parray()">提交</button>
</form>

js

function parray()
    {

        var formData = new FormData();
//以循环的形式判断该file标签内容是否为空，为空就不添加
        $("input[name='fileUpload']").each(function(i) {
     if($(this)[0].files[0]!="undefined")
    {
        formData.append("fileUpload", $(this)[0].files[0]);
    }
        });
         $.ajax({
            type:'post',
            url:'/file/uploadfiles',
            processData:false,
            contentType:false,
            cache: false,//设置为 false 将不会从浏览器缓存中加载请求信息
            async: false,
            data:formData,
            success:function(data)
            {
                alert("保存成功");
            },
            error:function (data) {
                alert("未知错误");

            }
        });

    }

controller

//多文件上传
    @ResponseBody
    @RequestMapping(value = "/uploadfiles", method = RequestMethod.POST)
//以集合形式接收ajax传过来的文件数组
    public String uploadfiles( List<MultipartFile> fileUpload, HttpServletRequest request) throws FileNotFoundException {

        for(int i=0;i<fileUpload.size();i++)
        {
            FileUtil.Fileupload(fileUpload.get(i),request);
        
        }

       return "保存成功";

    }

FileUtile

//用于存储工程
    public static String Fileupload(MultipartFile fileUpload, HttpServletRequest request) throws FileNotFoundException {

        //获取文件名
        String fileName = fileUpload.getOriginalFilename();
        //获取文件后缀名
        String suffixName = fileName.substring(fileName.lastIndexOf("."));
        //重新生成文件名
        String fileNames = UUID.randomUUID()+suffixName;
        //获取static目录
//文件上传的地址
        String staticPath = ClassUtils.getDefaultClassLoader().getResource("static/img").getPath();
        System.out.println(staticPath);
        String path1=staticPath.substring(1, staticPath.length());
        System.out.println(path1);


        //拼接保存文件的目录
        String upPath=staticPath+"/"+fileNames;
        //指定本地文件夹存储图片
        try {
            //将图片保存到static文件夹里
            fileUpload.transferTo(new File(upPath));
            return fileNames;
        } catch (Exception e) {
            e.printStackTrace();
            return "false";
        }
    }

删除文件

//删除文件
    public static String Delete(String fileName, HttpServletRequest request) throws FileNotFoundException {

        //获取static目录
        String staticPath = ClassUtils.getDefaultClassLoader().getResource("static/img").getPath();
        System.out.println(staticPath);


        //拼接保存文件的目录
        String upPath = staticPath + "/" + fileName;
        System.out.println(upPath+"删除的文件名");
        //删除本地文件夹的图片
        String resultInfo = null;
        File file = new File(upPath);
        if (file.exists()) {//文件是否存在
           file.delete();//存在就删了
            resultInfo = "文件已删除！";
        } else {
            resultInfo = "文件不存在！";
        }
        return resultInfo;

    }