引入js 这些步骤就不说了.直接上代码

Html表单:

 

     点击或拖动文件到此处...
 

js代码:

Dropzone.options.myGreatDropzone1 = {
    url: basePath_oss+"uploads",
    dictDefaultMessage: '拖动文件至此或者点击上传',
    paramName:'file',//上传的FILE名称，即服务端可以通过此来获取上传的文件
    //uploadMultiple: true,//指明是否允许 Dropzone 一次提交多个文件。默认为false。如果设为true，则相当于 HTML 表单添加multiple属性。(未解决问题:不知后台怎么接收)
    maxFiles: 10,//默认为null，可以指定为一个数值，限制最多文件数量。
    maxFilesize: 5,//文件的大小，单位是M
    autoProcessQueue : true,// 自动上传 默认为 true
    addRemoveLinks: true,//是否有删除文件的功能
    dictRemoveFile: "移除",//移除文件链接的文本。只设置addRemoveLinks: true 没有这个 会找不到删除按钮
    dictRemoveFileConfirmation: '确定删除此文件吗?',
    acceptedFiles: ".jpg,.png,.jpeg.JPG,.PNG,.JPEG",//支持的格式
    accept: function(file, done) {
        if (file.name === "justinbieber.jpg") {
            done("Naha, you don't.");
        }
        else { done(); }
    },
    success: function (file, response) {
        console.log(response);
        alert(response);
    },

    init: function() {
        //可以添加各种监听器
        this.on("addedfile", function(file) {
           alert("上传的文件名:"+file.name);
        });
        this.on("removedfile",function (file){
            alert("删除的文件名:"+file.name);
        });
    }
};

Java代码: 1.controller

  @PostMapping(value = "uploads")
  public List uploads(@RequestParam("file") MultipartFile[] file){
    return ossService.uploads(file);
  }

2.service

  
  List uploads(MultipartFile[] file);

3.serviceImpl

  @Override
  public List uploads(MultipartFile[] files) {

    List images = new ArrayList<>();

    for (MultipartFile file : files) {
      String image = uploadFile(file);
      if (image != null) {
        images.add(image);
      }
    }
    return images;
  }

 private String uploadFile(MultipartFile file) {
    if (file == null) {
      return null;
    }
    //上传的操作
    //将文件的名字编程唯一的再上传
    //获取上传的文件的原名
    String suffix = Objects.requireNonNull(file.getOriginalFilename()).substring(file.getOriginalFilename().lastIndexOf(".") + 1);
    //借助  UUID 将文件名编程唯一的 重新定义
    String uuid = UUIDUtil.getUuid();
    //定义上传oss的文件路径
    String datePath = ossClientConfig.getDirPrefix();
    String filename = datePath + "/" + uuid + "." + suffix;

    //构建oss客户端
    OSSClient ossClient = ossClientConfig.createOssClient();

    try {
      //file.getInputStream() 当前文件的输入流
      // 上传文件到OSS时需要指定包含文件后缀在内的完整路径，例如abc/efg/123.jpg。
      // 上传文件到指定的存储空间（bucketName）并将其保存为指定的文件名称（objectName）。
      ossClient.putObject(ossClientConfig.getBucketName(), filename, file.getInputStream());
    } catch (IOException e) {
      e.printStackTrace();
    }
    

    //例:https://tutu-image.oss-cn-beijing.aliyuncs.com/19c55f39-a82a-427c-9e81-25081271de06.jpg
    return "https://" + ossClientConfig.getBucketName() + "." + ossClientConfig.getEndpoint() + "/" + filename;
  }

4.OSSConfig

  @Value("${aliyun.oss.endpoint}")
  String endpoint ;
  @Value("${aliyun.oss.accessKeyId}")
  String accessKeyId ;
  @Value("${aliyun.oss.accessKeySecret}")
  String accessKeySecret;
  @Value("${aliyun.oss.bucketName}")
  String bucketName;
  @Value("${aliyun.oss.dir.prefix}")
  private String dirPrefix;

  @Bean
  public OSSClient createOssClient() {
    return (OSSClient)new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
  }

5.yml文件配置

aliyun:
  oss:
    # oss对外服务的访问域名
    endpoint: oss-cn-shanghai.aliyuncs.com
    # 访问身份验证中用到用户标识
    accessKeyId: XXX 阿里云获取
    # 用户用于加密签名字符串和oss用来验证签名字符串的密钥
    accessKeySecret: XXX 阿里云获取
    # oss的存储空间
    bucketName: 就是你创建的bucket的名称
    # 上传文件大小(M)
    maxSize: 10
    # 上传文件夹路径前缀
    dir:
      prefix: 文件夹名称

6.效果  前端效果:(这是上传服务器成功的效果)

 

服务器:

 

7.注意事项:         Dropzone.options.myGreatDropzone1 中的myGreatDropzone1是form表单中的id         Dropzone.js 还有好多配置项和事件可以用可以找一下中文文档看看.