dropzone拖拽上传组件使用全记录

原文链接: dropzone拖拽上传组件使用全记录

公司有一个需求是把附件上传优化成可以通过拖拽本地文件来上传的效果，找了一圈都没有找到特别简单好用的组件，最后还是决定使用github上1.6万star的dropzone。
这个组件效果还是不错的，但是使用起来并不是很容易，可能是我js的内功不足，下边记录一下踩坑经历。

引入：
github上搜索dropzone，下载dist目录，需要引入以下三个文件
在这里插入图片描述
在页面上可以用如下方式引入上传区域

<div id="dropz" class="dropzone"></div>
<script>
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#dropz", {
      url: "/upload-url"
  })
</script>

引入之后我们会发现上传区域的高度太大了，和整体页面完全违和，这个初始高度是由dropzone这个class的min-height决定的，直接覆盖样式，采用合适的高度即可。
dropzone有几个关键的配置项需要修改：

dictDefaultMessage：未上传文件时的提示语
dictCancelUpload: 取消上传按钮的提示语
dictRemoveFile: 移除文件按钮的提示语
dictMaxFilesExceeded: 文件数量超出限制的提示语
maxFiles: 最大文件数量
maxFilesize: 文件最大尺寸（单位：MB）
paramName: “file”, // 传到后台的参数名称
dictFileTooBig: 文件大小超出限制的提示
dictInvalidInputType: 文件类型不符合要求的提示
acceptedFiles: “.jpg,.jpeg,.png,.gif” //支持的格式

在设置好之后，本以为完事大吉了，但是还是有很坑爹的问题，比如超出文件数量限制时，还是会显示缩略图，然后在上边打个叉，正常的产品肯定是要弹个提示，然后把图片回删掉啊。。

在看了官方英文版的faq之后，找到了解决方法，代码如下

    myDropzone.on("maxfilesexceeded", function(file) {
        layer.msg('上传文件数量超出限制');
        this.removeFile(file);
    });

还需要自定义上传成功的事件，以达到前后端返回一致结果的效果。
直接展示一下整体代码：

Dropzone.autoDiscover = false;
    var myDropzone = new Dropzone("#dropz", {
        url: "/upload-url",
        dictDefaultMessage: '拖动文件至此或者点击上传', // 设置默认的提示语句
        dictCancelUpload: '取消上传',
        dictRemoveFile: '移除文件',
        dictMaxFilesExceeded: '文件数量超出限制',
        addRemoveLinks: true,
        maxFiles: 5,
        maxFilesize: 15,
        paramName: "file", // 传到后台的参数名称
        dictFileTooBig: "文件大小超出限制",
        dictInvalidInputType: '文件类型不符合要求',
        init: function () {
            this.on("success", function (file, data) {
                data = JSON.parse(data);
                if(data.code == '1'){
                    var iArray=$(".fujian");		//页面提前写好隐藏域,用于保存附件地址
                    for (var i=0;i<5;i++){		//最新上传的一个附件保存在最后一个位置
                        if($(iArray[i]).val() == ''){
                            $(iArray[i]).val(data.pic)
                            i=5
                        }
                    }
                }else{
                    layer.msg(data.msg);
                    this.removeFile(file);	//在后端返回上传失败结果时,弹出失败原因提示,删除图片
                }
            });
            this.on("removedfile", function (file) {
                var xhr = JSON.parse(file.xhr.response);	//获取图片上传时后端返回的地址
                //xhr.pic 文件路径
                var iArray=$(".fujian");
                for (var i=0;i<5;i++){
                    if($(iArray[i]).val() == xhr.pic){
                        $(iArray[i]).val('')			//找到隐藏域中和被移除的图片地址相同的input,value设置为空
                    }
                }
            });
        }
    });

    myDropzone.on("maxfilesexceeded", function(file) {
        layer.msg('上传文件数量超出限制');
        this.removeFile(file);
    });

这样写基本没有什么问题了，实现了上传功能以及提交表单时把图片地址一起传到后端保存到数据库。

最终效果如下

在这里插入图片描述

dropzone拖拽上传组件使用全记录

猜你喜欢