Layui+SpringMVC实现图片批量上传_layui 批量上传文件 spring-CSDN博客

最近需要做一个批量上传图片的功能，为丰富前端框架的拓展学习使用，这次打算用layui前端框架实现，源码放在文章底部，废话不多说，先上演示效果

执行前：

操作后：

一、导入对应的layui样式及其资源文件
1.引入对应的css及其js文件

2.编辑上传的页面

3.上传文件的js配置

<context:component-scan base-package="csdn.liuxuquan.controller"/>
<mvc:annotation-driven/>

<mvc:resources mapping="/resources/**" location="/resources/"/>

<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/jsp/"/>
<property name="suffix" value=".jsp"/>
</bean>


<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="UTF-8" />

<property name="maxUploadSize" value="10485760" />
</bean>
图片名称请不要重复，这里使用UUID，如果图片保存全路径名xx/xx/xx.png重复，请想想会有什么问题？  会造成图片覆盖！
   @SuppressWarnings("deprecation")
   @RequestMapping("/upload")
   @ResponseBody
   public ImgResult uplpad(MultipartFile file, HttpServletRequest request) {
       String desFilePath = "";
       String oriName = "";
       ImgResult result = new ImgResult();
       Map<String, String> dataMap = new HashMap<>();
       ImgResult imgResult = new ImgResult();
       try {
           // 1.获取原文件名
           oriName = file.getOriginalFilename();
           // 2.获取原文件图片后缀，以最后的.作为截取(.jpg)
           String extName = oriName.substring(oriName.lastIndexOf("."));
           // 3.生成自定义的新文件名，这里以UUID.jpg|png|xxx作为格式（可选操作，也可以不自定义新文件名）
           String uuid = UUID.randomUUID().toString();
           String newName = uuid + extName;
           // 4.获取要保存的路径文件夹
           String realPath = request.getRealPath("resources/imgs/");
           // 5.保存图片
           desFilePath = realPath + "\\" + newName;
           File desFile = new File(desFilePath);
           file.transferTo(desFile);
           System.out.println(desFilePath);
           // 6.返回保存结果信息
           result.setCode(0);
           dataMap = new HashMap<>();
           dataMap.put("src", "resources/imgs/" + newName);
           result.setData(dataMap);
           result.setMsg(oriName + "上传成功！");
           return result;
       } catch (IllegalStateException e) {
           imgResult.setCode(1);
           System.out.println(desFilePath + "图片保存失败");
           return imgResult;
       } catch (IOException e) {
           imgResult.setCode(1);
           System.out.println(desFilePath + "图片保存失败--IO异常");
           return imgResult;
       }
   }
商品保存Controller:

商品的url以逗号拼接批量图片访问路径，最终访问以ip+图片访问路径进行访问

@Controller
public class GoodsController {
   @ResponseBody
   @RequestMapping(value="saveGoods",method=RequestMethod.POST)
   private String saveImgInfo(String title,String smallTit,String imgUrls){
       /**
       * 你应该在这里做service层的调用
       * 你应该结果返回数据格式如定义返回格式：1代表成功，0代表失败
       * 总之你应该规范
       * 我这里直接返回1，代表成功。
       */
       System.out.println(title);
       System.out.println(smallTit);
       System.out.println(imgUrls);
       String[] urls = imgUrls.split(",");
       for (int i = 0; i < urls.length; i++) {
           System.out.println("图片名称："+urls[i]);
       }
       return "1";
   }
}

为方便学习，下面是源码，我设置的是最低的积分，我是绝对不想要你这一点积分的：

CSDN:https://download.csdn.net/download/qq_26570353/10293422

码云：https://gitee.com/liuxuquan/Demo/tree/master
---------------------
作者：liuxuquan_
来源：CSDN
原文：https://blog.csdn.net/qq_26570353/article/details/79599303
版权声明：本文为博主原创文章，转载请附上博文链接！