内蒙古自治区建设厅网站,论文中网站数据则呢做文献参考,做网站都需要了解什么,手机优化不到80怎么办目录 一、前言
二、项目准备
2.1、创建SpringBoot项目
2.2、项目结构
2.3、配置文件
2.4、创建控制器
2.5、创建服务
2.6创建前端界面
2.7、静态资源
三、运行项目
四、测试上传功能
总结 一、前言 在现代 web 开发中#xff0c;图片上传功能是一个…目录 一、前言
二、项目准备
2.1、创建SpringBoot项目
2.2、项目结构
2.3、配置文件
2.4、创建控制器
2.5、创建服务
2.6创建前端界面
2.7、静态资源
三、运行项目
四、测试上传功能
总结 一、前言 在现代 web 开发中图片上传功能是一个常见的需求。本文将介绍如何使用 Spring Boot 实现一个简单的图片上传功能包括文件的上传、存储和展示。我们将使用 Spring Boot 的文件上传功能并结合 Thymeleaf 作为模板引擎来构建前端界面。
二、项目准备
2.1、创建SpringBoot项目 可以使用 Spring Initializr 创建一个新的 Spring Boot 项目。选择以下依赖 Spring WebThymeleafSpring Boot DevTools可选方便开发时热部署
2.2、项目结构 springboot-image-upload │ ├── src │ ├── main │ │ ├── java │ │ │ └── com │ │ │ └── example │ │ │ └── imageupload │ │ │ ├── ImageUploadApplication.java │ │ │ ├── controller │ │ │ │ └── ImageUploadController.java │ │ │ └── service │ │ │ └── ImageUploadService.java │ │ └── resources │ │ ├── static │ │ ├── templates │ │ │ └── upload.html │ │ └── application.properties └── pom.xml
2.3、配置文件
在 src/main/resources/application.properties 中添加如下配置
# 文件上传的最大大小
spring.servlet.multipart.max-file-size2MB
spring.servlet.multipart.max-request-size2MB# 上传文件的存储路径
file.upload-diruploads2.4、创建控制器
在 com.example.imageupload.controller 包下创建 ImageUploadController 类。
package com.example.imageupload.controller;import com.example.imageupload.service.ImageUploadService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;import java.util.List;Controller
public class ImageUploadController {Autowiredprivate ImageUploadService imageUploadService;GetMapping(/)public String uploadPage(Model model) {ListString uploadedImages imageUploadService.getUploadedImages();model.addAttribute(uploadedImages, uploadedImages);return upload;}PostMapping(/upload)public String uploadImage(RequestParam(file) MultipartFile file, Model model) {if (file.isEmpty()) {model.addAttribute(message, 请选择一个文件进行上传);return upload;}// 保存文件String imagePath imageUploadService.uploadImage(file);model.addAttribute(message, 文件上传成功: imagePath);model.addAttribute(uploadedImages, imageUploadService.getUploadedImages());return upload;}
}2.5、创建服务
在 com.example.imageupload.service 包下创建 ImageUploadService 类。
package com.example.imageupload.service;import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;import java.io.File;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.util.ArrayList;
import java.util.List;Service
public class ImageUploadService {Value(${file.upload-dir})private String uploadDir;public String uploadImage(MultipartFile file) {try {// 确保目录存在File dir new File(uploadDir);if (!dir.exists()) {dir.mkdirs();}// 文件保存路径Path filePath Paths.get(uploadDir, file.getOriginalFilename());file.transferTo(filePath);return file.getOriginalFilename();} catch (IOException e) {e.printStackTrace();return null;}}public ListString getUploadedImages() {ListString images new ArrayList();File dir new File(uploadDir);if (dir.exists()) {for (File file : dir.listFiles()) {images.add(file.getName());}}return images;}
}2.6创建前端界面
在 src/main/resources/templates 目录下创建 upload.html 文件。
!DOCTYPE html
html xmlns:thhttp://www.thymeleaf.org
headtitle图片上传/titlelink relstylesheet hrefhttps://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css
/head
body
div classcontainerh1 classmt-5图片上传/h1form action/upload methodpost enctypemultipart/form-datadiv classform-grouplabel forfile选择文件/labelinput typefile classform-control-file idfile namefile required/divbutton typesubmit classbtn btn-primary上传/button/formdiv th:if${message} classalert alert-info mt-3p th:text${message}/p/divh2 classmt-5已上传的图片/h2div classrowdiv classcol-md-3 th:eachimage : ${uploadedImages}div classcard mb-4img th:src{/uploads/{image}(imageimage)} classcard-img-top alt图片div classcard-bodyh5 classcard-title th:text${image}/h5/div/div/div/div
/div
/body
/html2.7、静态资源
在 src/main/resources/static 目录下创建 uploads 文件夹确保上传的图片能够被访问。
三、运行项目 确保项目依赖已经正确引入并在 IDE 中启动项目。打开浏览器访http://localhost:8080/你应该可以看到上传界面。
四、测试上传功能
选择一个图片文件进行上传点击“上传”按钮。上传成功后页面会显示上传的消息和已上传的图片列表。
总结 通过上述步骤我们成功实现了一个简单的图片上传功能。你可以根据自己的需求进一步扩展功能比如增加文件类型和大小的限制、支持多文件上传、实现文件的删除功能等。希望这个示例能帮助你在项目中实现图片上传功能
