Dropzone使用总结

前几天，公司后台接手做了一下啊，其中有项功能是需要上传图片等数据。在此使用了dropzone框架，现来总结一下使用该框架和在使用过程中所遇到的问题。

先放上dropzone官网，http://www.dropzonejs.com/。官网对各API和各种处理也比较详细，这里就仅写一下在我的项目中所呈现的内容和注意的点吧。

在我的项目中，使用的是类似官网demo的例子

在项目中的需求是，需要用户拖曳图片或通过文件夹选取图片，支持预览，每次最多只能上传3张图片，每张图片大小不允许超过2MB。Ok，发现dropzone都能很容易的实现这些需求和功能。废话不多说，代码展示：

1、首先引入dropzone，在官网可下载，同时在页面中引入dropzone样式和js文件

<link href="../../views/assets/global/plugins/dropzone/css/dropzone.css" rel="stylesheet"/>
<script src="../../views/assets/global/plugins/dropzone/dropzone.js"></script>

2、在html页面中，没有过多的要求，也没有进行什么修改，直接使用dropzone样式即可

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

 3、ok，前面的准备工作就做好了。接下来，进行初始化我们的dropzone控件

Dropzone.autoDiscover = false;
        var dropz = new Dropzone('div.dropzone',{
            url : '../../xxx',
            autoProcessQueue : false,// 如果为false，文件将被添加到队列中，但不会自动处理队列。
            uploadMultiple : true, // 是否在一个请求中发送多个文件。
            parallelUploads : 3, // 并行处理多少个文件上传
            maxFiles : 3, // 用于限制此Dropzone将处理的最大文件数
            maxFilesize : 2,
            acceptedFiles: ".jpg,.gif,.png",
            dictDefaultMessage:"拖拉图片文件到这里或者点击",
            dictFallbackMessage:"你的浏览器不支持拖拉文件来上传",
            dictMaxFilesExceeded:"文件数量过多",
            dictFileTooBig:"可添加的最大文件大小为{{maxFilesize}}Mb，当前文件大小为{{filesize}}Mb ",
            init : function() { // dropzone初始化时调用您可以在此处添加事件侦听器
                var myDropzone = this;
                this.on("addedfile",function(file) {
                    var removeButton = Dropzone.createElement("<button class='btn btn-sm btn-block'>移除</button>");
                    removeButton.addEventListener("click",function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        myDropzone.removeFile(file);
                    });
                    file.previewElement.appendChild(removeButton);
                });
            },
　　　　　　　sendingmultiple : function(file, xhr, formData) {// 在每个文件发送之前调用。获取xhr对象和formData对象作为第二和第三个参数，可以修改它们（例如添加CSRF令牌）或添加其他数据。
                $.each(submitParams,function(key,value){
                    formData.set(key,value);
                });
            },
　　　　　　　successmultiple : function(file, response){// 该文件已成功上传。获取服务器响应作为第二个参数。
　　　　　　　},
            completemultiple : function(file,data){
           },
)};

解析：init就是我们初始化的代码了，在初始化中，加入添加文件时间侦听器，可在增加文件时处理一些界面或者数据的手机。在此，即为增加的图片添加了个移除按钮，该按钮点击触发myDropzone.removeFile(file事件，则可实现在页面上添加移除等操作了。

　　　url : '../../xxx', 该配置项必须在form之外的元素配置，还可以提供一个将被调用files并且必须返回url 的函数。该配置项连接了后台上传的地址，则后台可接收处理dropzone发送过来的数据。

　　　autoProcessQueue : false,// 如果为false，文件将被添加到队列中，但不会自动处理队列

　　　uploadMultiple : true, // 是否在一个请求中发送多个文件。

　　　parallelUploads : 3, // 并行处理多少个文件上传

　　　以上三项配置，可处理dropzone同时请求上传多个文件，在项目中，需求是3个，则parallelUploads设置为3。

　　　maxFiles : 3, // 用于限制此Dropzone将处理的最大文件数

　　　maxFilesize : 2,

　　　acceptedFiles: ".jpg,.gif,.png",

　　　dictDefaultMessage:"拖拉图片文件到这里或者点击",

　　　dictFallbackMessage:"你的浏览器不支持拖拉文件来上传",

　　　dictMaxFilesExceeded:"文件数量过多",

　　　dictFileTooBig:"可添加的最大文件大小为{{maxFilesize}}Mb，当前文件大小为{{filesize}}Mb ",

　　　以上配置即根据需求所配置，各取所需，在官网中可查找更多的配置选项满足需求更改。

上传：

sendingmultiple : function(file, xhr, formData) {// 在每个文件发送之前调用。获取xhr对象和formData对象作为第二和第三个参数，可以修改它们（例如添加CSRF令牌）或添加其他数据。
     $.each(submitParams,function(key,value){
          formData.set(key,value);
     });
},

由于autoProcessQueue配置为false，故需手动处理队列，在点击提交按钮时，触发dropz.processQueue();则可上传。在sendingmultiple中，可加入自己需要传入的参数，在这通过formData传入一些需要传入的参数，在后台通过request.getParameterMap();接收即可。

后台处理代码：

@RequestMapping(value = "/xxx", method = RequestMethod.POST)
    public ResponseEntity<String> playerAccountManager(MultipartHttpServletRequest request) {
        InputStream is = null;
        Map<String, Object> res  = new HashMap<String, Object>();
        try {
            Iterator<String> itr = request.getFileNames();
            Map<String, String[]> requestParams = request.getParameterMap();
            Map<String, String> params = new HashMap<String, String>();
            for (Entry<String, String[]> entry : requestParams.entrySet()) {
                params.put(entry.getKey(), entry.getValue()[0]);
            }
            while (itr.hasNext()) {
                String uploadedFile = itr.next();
                MultipartFile file = request.getFile(uploadedFile);
                String filename = file.getOriginalFilename();
                is = file.getInputStream();
                FileUtil.copyInputStreamToFile("F:/Test", is, filename);
            }
            res.put("code", 0);
        } catch (Exception e) {
            if (logger.isDebugEnabled()) {
                logger.debug(e.getMessage());
            }
            e.printStackTrace();
            res.put("code", 1);
            res.put("msg", e.getMessage());
            return new ResponseEntity<>(JSON.toJSONString(res), HttpStatus.INTERNAL_SERVER_ERROR);
        } finally {
            try {
                is.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        res.put("msg", "Uploaded successfully");
        return new ResponseEntity<>(JSON.toJSONString(res), HttpStatus.OK);
    }

 后台使用的是spring，通过配置MultipartHttpServletRequest，则接收时不用使httpServletRequest转换成MultipartHttpServletRequest，spring接收到的是MultipartHttpServletRequest请求，则自动会将请求转换成MultipartHttpServletRequest，后台代码直接处理即可。request.getFile(uploadedFile);

可逐一接收dropzone发送过来的图片，uploadedFile 为图片文件名称。然后进行读流存储操作。将图片存储到指定路径。