使用DropZone+SpringBoot实现图片的上传和浏览

angushine

已于 2024-08-25 13:26:35 修改

阅读量1.5k

点赞数 39

CC 4.0 BY-SA版权

文章标签： spring boot 后端 java

于 2024-08-25 13:23:17 首次发布

本文链接：https://blog.youkuaiyun.com/Angushine/article/details/141497575

经常在项目中需要使用上传文件功能，找了不少前端上传组件，都不是很好用，今天尝试了一下DropZone，发现不错，顺便记录一下使用过程，方便后续查阅。在做开发的时候，经常需要调研一些技术，因此前后端都需要用到，为方便开发，这里采用传统的开发方式，没有做前后端分离，方便调试。前端采用HTML+Bootstrap+jQuery，后端采用SpringBoot2.6.3。

总体

新建一个SpringBoot程序，目录结构如下：
在这里插入图片描述
files：存放程序运行过程中的生成文件
logs：日志目录
src：源代码目录
uploads：上传文件目录

前端第三方文件放在/src/main/resources/static目录下，主要有bootstrap、dropzone和jquery，模版文件放在/src/main/resources/templates目录下，在这里注意调试时，经常需要修改HTML页面，需要快速将HTML页面编译到到运行目录/target/classes，这里使用快捷键CTRL+F9即可，前提是IDEA的自动构建项目要勾上
在这里插入图片描述

前端

首先从DropZone下载相关的js文件和css文件，或者直接让一些大模型给一个示例，我这里采用腾讯元宝，稍微修改一下，基本可以用，但是不少地方还是需要自己定制。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>File Upload</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./dropzone/dropzone.min.css">
    <script src="./dropzone/dropzone.min.js"></script>
    <script src="./jquery/jquery.min.js"></script>
    <style>
        .dropzone {
      padding: 3px 0 0 0; margin: 0 0 8px 0; text-align: center; overflow: hidden; width: 120px;
            min-height: 30px; height: 36px; border: #ccc solid 1px; }
        .dz-processing, .dz-button {
      display: none; }
        #fileList {
      display: flex; flex-wrap: wrap; gap: 10px; }
        .file-item {
      background-color: #f9f9f9; padding: 5px; border: 1px solid #ccc; border-radius: 0; cursor: pointer; }
    </style>
</head>
<body>
    <div class="container">
        <div style="padding:10px 0;">参看：https://www.dropzone.dev/</div>
        <div class="dropzone primary" id="my-dropzone">上传文件</div>