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 為圖片文件名稱。然后進行讀流存儲操作。將圖片存儲到指定路徑。