SpringMVC利用dropzone组件实现图片上传

操作步骤如下

一、dropzone导入

01.dropzone官网下载其插件压缩包并复制项目；

02.将CSS和JS文件在HTML文件中引入；

//下面src中的地址根据自己文件地址进行修改，不能之间copy，否则可能用不了！！！
<link rel="stylesheet" href="/static/assets/plugins/dropzone/min/dropzone.min.css" rel="external nofollow" />
<link rel="stylesheet" href="/static/assets/plugins/dropzone/min/basic.min.css" rel="external nofollow" />
<script src="/static/assets/plugins/dropzone/min/dropzone.min.js"></script>

二、dropzone的使用

只需要一个 div 元素，用 JavaScript 代码启用即可

HTML 结构如下：

<div id="dropz" class="dropzone"></div>

JavaScript 启用代码如下：

<script>
var myDropzone = new Dropzone("#dropz", {
 url: "/upload", //需要上传的后台接口地址
 dictDefaultMessage: '拖动文件至此或者点击上传', // 设置默认的提示语句
 paramName: "dropzFile", // 传到后台的参数名称
 init: function () {
   this.on("success", function (file, data) {
     // 上传成功触发的事件

});
 }
});
</script>

前端工作做完后，后台需要提供文件上传支持，我们使用 Spring MVC 来接收上传的文件

三、SpringMVC的处理

commons-fileupload jar包导入

01.如果使用Meaven仓库，在其Pom.xml添加如下依赖。

<dependency>
 <groupId>commons-fileupload</groupId>
 <artifactId>commons-fileupload</artifactId>
 <version>1.3.2</version>
</dependency>

 如果未使用Meaven，百度commons-fileupload下载jar并复制到项目中。

配置 spring-mvc.xml

需要 Spring 注入 multipartResolver 实例，spring-mvc.xml 增加如下配置：

<!-- 上传文件拦截，设置最大上传文件大小 10M = 10*1024*1024(B) = 10485760 bytes -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
 <property name="maxUploadSize" value="10485760"/>
</bean>

Controller类的代码实现

@Controller
public class UploadController {

@ResponseBody
 @RequestMapping(value = "upload", method = RequestMethod.POST)
 public String upload(MultipartFile dropzFile, HttpServletRequest request) {

// 获取上传的原始文件名
   String fileName = dropzFile.getOriginalFilename();
   // 设置文件上传路径
   String filePath = request.getSession().getServletContext().getRealPath("/static/upload");
   // 获取文件后缀
   String fileSuffix = fileName.substring(fileName.lastIndexOf("."), fileName.length());

// 判断并创建上传用的文件夹
   File file = new File(filePath);
   if (!file.exists()) {
     file.mkdir();
   }
   // 重新设置文件名为 UUID，以确保唯一
   file = new File(filePath, UUID.randomUUID() + fileSuffix);

try {
     // 写入文件
     dropzFile.transferTo(file);
   } catch (IOException e) {
     e.printStackTrace();
   }

return "";
 }
}

来源：https://blog.csdn.net/weixin_43881282/article/details/104302040