dropzone上传单文件、多文件，springboot后台接收

引入相关的js和css

（一）单文件上传实例：

• html代码：

<!--轮播图-->
<div class="form-group">
    <label class="col-sm-3 control-label ">轮播图：</label>
    <div class="col-sm-8">
        <input type="hidden" id="BannarImgId" name="BannarImgId">
        <div id="bannarzone" class="dropzone" style="min-height: 120px"></div>
    </div>
</div>

• js代码：

// 缩略图片拖拽区域=============================================
    var myAvatarzone = new Dropzone("#avatarzone", {
        url: "/FileController/uploadAvatar",//文件提交地址
        method: "post",  //也可用put
        paramName: "avatar", //默认为file
        maxFiles: 1,//一次性上传的文件数量上限
        maxFilesize: 2, //文件大小，单位：MB
        acceptedFiles: ".jpg,.gif,.png,.jpeg", //上传的类型
        addRemoveLinks: true,
        parallelUploads: 1,//一次上传的文件数量
        //previewsContainer:"#preview",//上传图片的预览窗口
        dictDefaultMessage: '拖动文件至此或者点击上传',
        dictMaxFilesExceeded: "您最多只能上传1个文件！",
        dictResponseError: '文件上传失败!',
        dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg。",
        dictFallbackMessage: "浏览器不受支持",
        dictFileTooBig: "文件过大上传文件最大支持.",
        dictRemoveLinks: "删除",
        dictCancelUpload: "取消",
        init: function () {
            this.on("addedfile", function (file) {
                //上传文件时触发的事件

            });
            this.on("success", function (file, data) {
                //上传成功触发的事件
                if (data != null && data != "") {
                    $("#avatarImgId").val(data.data);
                }

            });
            this.on("error", function (file, data) {
                //上传失败触发的事件

            });
            this.on("removedfile", function (file) {//删除文件触发结果
                //console.log(file);
                $("#avatarImgId").val("");
            });
        }
    });

• 后台接受：

  //自己的方法
  @PostMapping("/uploadAvatar")
      @ResponseBody
      public AjaxResult updateAvatar(@RequestParam("avatar") MultipartFile avatar) {
          try {
              if (!avatar.isEmpty()) {
                  //上传文件、将文件路径等信息存储到表
                  String id = phoneFileService.insertSelective(avatar);
                  if (id != null) {
                      return AjaxResult.successData(200, id);
                  }
              }
              return error();
          } catch (Exception e) {
              return error(e.getMessage());
          }
      }

  （二）多文件上传实例：

        注意事项：

        1. uploadMultiple:true,设置可以上传多个附件，请注意后台收到的参数； 

        2.后台接收的参数是数组类型@RequestParam("bannar[ ]") MultipartFile[ ] bannar 

• html代码：

<!--轮播图-->
                            <div class="form-group">
                                <label class="col-sm-3 control-label ">轮播图：</label>
                                <div class="col-sm-8">
                                    <input type="hidden" id="BannarImgId" name="BannarImgId">
                                    <div id="bannarzone" class="dropzone" style="min-height: 120px"></div>
                                </div>
                            </div>

• js代码：

// 轮播图片拖拽区域=============================================
    var myBannarzone = new Dropzone("#bannarzone", {
        url: "/FileController/uploadBannar",//文件提交地址
        method: "post",  //也可用put
        paramName: "bannar", //默认为file
        maxFiles: 8,//一次性上传的文件数量上限
        uploadMultiple:true,
        maxFilesize: 2, //文件大小，单位：MB
        acceptedFiles: ".jpg,.gif,.png,.jpeg", //上传的类型
        addRemoveLinks: true,
        parallelUploads: 8,//一次上传的文件数量
        //previewsContainer:"#preview",//上传图片的预览窗口
        dictDefaultMessage: '拖动文件至此或者点击上传',
        dictMaxFilesExceeded: "您最多只能上传8个文件！",
        dictResponseError: '文件上传失败!',
        dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg。",
        dictFallbackMessage: "浏览器不受支持",
        dictFileTooBig: "文件过大上传文件最大支持.",
        dictRemoveLinks: "删除",
        dictCancelUpload: "取消",
        init: function () {
            this.on("addedfile", function (file) {
                //上传文件时触发的事件

            });
            this.on("success", function (file, data) {
                //上传成功触发的事件
                if (data != null && data != "") {
                    $("#BannarImgId").val(data.data);
                }

            });
            this.on("error", function (file, data) {
                //上传失败触发的事件

            });
            this.on("removedfile", function (file) {//删除文件触发结果
                //console.log(file);
                $("#BannarImgId").val("");
            });
        }
    });

• 后台接受:

@PostMapping("/uploadBannar")
    @ResponseBody
    public AjaxResult uploadBannar(@RequestParam("bannar[]") MultipartFile[] bannar) {
        System.out.print("获取到的bannar的数量是====="+bannar.length);
        try {
            if (bannar != null && bannar.length > 0) {
                String id = phoneFileService.insertBannar(bannar);
                if (id != null) {
                    return AjaxResult.successData(200, id);
                }
            }
            return error();
        } catch (Exception e) {
            return error(e.getMessage());
        }
    }