JavaWeb合集23-文件上传

二十三 、 文件上传

实现效果：用户点击上传按钮、选择上传的头像，确定自动上传，将上传的文件保存到指定的目录中，并重新命名，生成访问链接，返回给前端进行回显。

1、前端实现

vue3+AntDesignVue实现

<template><!--图片回显--><a-avatar :size="100"><template #icon><img :src="userStore.userInfo.avatar+'?' + new Date().getTime()" alt=""></template></a-avatar><!--图片上传按钮 --><!--showUploadList=fales 不显示上传列表；:multiple="false" 只上传1个；accept=".png,.jpg" 限制文件格式--><a-upload name="file":file-list="fileList":showUploadList="false":beforeUpload="beforeUpload" :onChange="handleChange" :multiple="false"  accept=".png,.jpg"><a-button class="mt-4">上传头像</a-button></a-upload></template><script setup lang="ts">
import type { UnwrapRef } from 'vue';
import { updateUserAvatarApi } from '~/api/file/file.ts';const { t } = useI18n()
//文件列表
const fileList = ref([]);//
async function beforeUpload(file){//文件类型，限制，可以不用写，因为，在accept=".png,.jpg" 已经限制了
var fileName = file.name.substring(file.name.lastIndexOf('.') + 1)
if (fileName!='png' && fileName!='jpg') {message.error('文件类型必须是png或jpg!')
return false
}//文件大小(3M=3*1024KB*1024字节)
var fileSize=file.size;
if(fileSize > 3*1024*1024){message.error("图片大小不能大于3M");return false
}try {  const formData = new FormData(); formData.append('file', file); // 将文件添加到 FormData 对象中  // 假设updateUserAvatarApi返回的是一个Promise，且解析为包含fileUrl的对象  const response = await updateUserAvatarApi(formData);  if(response.data.code==1){fileList.value=[];  //清空文件列表（没用因为在beforeUpload中，我直接showUploadList="false"不显示列表）userStore.userInfo.avatar=response.data.data;message.success('头像上传成功');}else{message.error('头像上传失败，请重试');  }} catch (error) {  // 处理上传失败的情况  message.error(error);  }  // 返回false以阻止<a-upload>的默认上传行为  return false;  }// 处理文件上传或移除后的逻辑  
function handleChange(info) {  // info.fileList 是更新后的文件列表  // 但由于限制了multiple为false，所以这里fileList应该始终只有一个文件或为空  fileList.value = info.fileList.slice(-1);  
}  </script>

请求函数

// 后面的方法是用户自己头像
export function updateUserAvatarApi(param: any) {return usePost<FileUrl>('/upload/uploadUserAvater', param, {// 设置为false的时候不会携带tokentoken: true,// 开发模式下使用自定义的接口customDev: true,// 是否开启全局请求loadingloading: false,// 设置请求头headers: {'Content-Type': 'multipart/form-data'}})}export interface FileUrl {data: string}

2、后端实现

配置拦截器的静态资源映射，方便对上传后的文件进行访问

/*** 配置拦截器的静态资源映射*/
@Slf4j
@Configuration
public class ResourConfigure implements WebMvcConfigurer {// 静态资源映射@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {/*** 资源映射路径* addResourceHandler：访问映射路径* addResourceLocations：资源绝对路径*/String osName=System.getProperty("os.name");String fileUploadResources="/static/**";String win="win";if(osName.toLowerCase().startsWith(win)){ApplicationHome applicationHome=new ApplicationHome(this.getClass());String pre="file:"+applicationHome.getDir().getParentFile().getParentFile()+ "\\src\\main\\resources\\static\\";registry.addResourceHandler(fileUploadResources).addResourceLocations(pre);}else {ApplicationHome applicationHome=new ApplicationHome(this.getClass());String pre="file:"+applicationHome.getDir().getParentFile().getParentFile()+ "/src/main/resources/static/";registry.addResourceHandler(fileUploadResources).addResourceLocations(pre);}}}

写相关配置，在application.properties中，方便生成访问链接

#根据自己的需求进行修改即可
#端口号
server.port=8080   
#服务地址
server.address=localhost  
#访问路径
server.servlet.context-path=/    
#限制单个文件的上传大小
spring.servlet.multipart.max-file-size=5MB
#限制整个请求的最大大小
spring.servlet.multipart.max-request-size=5MB

创建文件上传工具类，方便对文件上传进行操作。

在此之前，确保这个目录的存在：（\src\main\resources\static\）可根据自己需求进行修改，在工具类中

/*** 文件上传工具类*/
@Component
public class FileUpload {@Value("${server.servlet.context-path}")private String contextPath;@Value("${server.port}")private String serverPort;@Value("${server.address}")private String serverAddress;@Autowiredprivate ServletContext servletContext;public String uploadFile(MultipartFile file, String folder) {// 获取图片的原始名字String originalFilename = file.getOriginalFilename();if (originalFilename == null || originalFilename.isEmpty()) {throw new IllegalArgumentException("文件名不能为空");}// 获取文件的后缀和新文件名String ext = "." + originalFilename.substring(originalFilename.lastIndexOf('.') + 1);String uuid = UUID.randomUUID().toString().replace("-", "");String fileName = uuid + ext;// 构建目标文件路径String pre = getResourcePath(folder);String filePath = pre + fileName;// 上传图片try {file.transferTo(new File(filePath));// 返回访问链接return getAccessPath(folder, fileName);} catch (IOException e) {e.printStackTrace();}return null;}public String uploadFile(MultipartFile file, String folder, String fileName) {// 获取图片的原始名字String originalFilename = file.getOriginalFilename();if (originalFilename == null || originalFilename.isEmpty()) {throw new IllegalArgumentException("文件名不能为空");}// 获取文件的后缀和新文件名String ext = "." + originalFilename.substring(originalFilename.lastIndexOf('.') + 1);fileName = fileName + ext;// 构建目标文件路径String pre = getResourcePath(folder);String filePath = pre + fileName;// 上传图片try {file.transferTo(new File(filePath));// 返回访问链接return getAccessPath(folder, fileName);} catch (Exception e) {e.printStackTrace();}return null;}//获取上传路径private String getResourcePath(String folder) {// 获取操作系统的名称String osName = System.getProperty("os.name");String win = "win";// 获取项目的根目录String projectRoot = System.getProperty("user.dir");// 根据操作系统生成正确的路径String staticPath;if (osName.toLowerCase().startsWith(win)) {//windos系统staticPath = projectRoot + "\\src\\main\\resources\\static\\" + folder + "\\";} else {//Linux系统staticPath = projectRoot + "/src/main/resources/static/" + folder + "/";}// 如果目录不存在，就创建目录File dir = new File(staticPath);if (!dir.exists()) {dir.mkdirs();}return staticPath;}//构建访问路径private String getAccessPath(String folder, String fileName) {// 构建访问路径return "http://" + serverAddress + ":" + serverPort + contextPath + "static/" + folder + "/" + fileName;}
}

可以设置一个常量类，来指定上传到的目录

public class FileUploadFolder {public static final String USER_AVATER_FOLDER = "user_avatar";public static final String  ACTIVITY_FOLDER = "activity";
}

后端接口编写：Controller层，根据自己的项目来即可

@Tag(name="文件上传接口")
@RestController
@RequestMapping("/upload")
@Slf4j
public class UploadController {@Autowiredprivate UserService userService;/*** 修改用户头像* @param file* @return*/@Operation(summary = "修改用户头像")@PostMapping("/uploadUserAvater")public ResponseResult uploadUserAvater(@RequestParam("file") MultipartFile file){if(file.isEmpty()){return ResponseResult.error("头像为空，请重新选择");}String imgUrl = userService.uploadUserAvater(file);if(imgUrl==null){return ResponseResult.error("头像上传失败");}return ResponseResult.success(imgUrl);}}

Service层：根据自己的项目来即可

@Slf4j
@Service
@Transactional
public class UserServiceImpl implements UserService {//根据自己的项目来，注入对应的Bean@Autowiredprivate final UserMapper userMapper;//注入写好的工具类@Autowiredprivate FileUpload fileUpload;/*** 修改用户头像* @param file* @return*/@Overridepublic String uploadUserAvater(MultipartFile file) {// 获取用户获取用户信息（根据自己的项目来，获取用户ID，来查询用户修改头像链接）Long uid = Long.parseLong(StpUtil.getLoginId().toString());UserInfo userInfo = userMapper.getUserById(uid);// 调用文件上传工具类,传入：文件，保存到的文件夹，文件名//设置文件名是为了替换旧的头像文件String imgUrl= fileUpload.uploadFile(file, FileUploadFolder.USER_AVATER_FOLDER,userInfo.getUsername());if(imgUrl!=null) {userInfo.setAvatar(imgUrl);userMapper.updateById(userInfo);log.info("头像上传成功：" + imgUrl);//返回生成的链接return imgUrl;}return null;}}

3、测试与效果

上传后的图片

在这里插入图片描述

生成的访问链接，存入到数据库的样子

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/58762.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Leetcode 34 Find First and Last Position of Element in Sorted Array

Leetcode 34 Find First and Last Position of Element in Sorted Array

题意&#xff1a;找到非严格递增的数组中和target相等的左右边界 https://leetcode.com/problems/find-first-and-last-position-of-element-in-sorted-array/description/ 解答&#xff1a; 经典二分&#xff0c;找左右边界&#xff0c;要查看l是否满足题意 class Solution …
阅读更多...
LinkedList和单双链表。

LinkedList和单双链表。

java中提供了双向链表的动态数据结构 --- LinkedList&#xff0c;它同时也实现了List接口&#xff0c;可以当作普通的列表来使用。也可以自定义实现链表。 单向链表&#xff1a;一个节点本节点数据下个节点地址 给定两个有序链表的头指针head1和head2&#xff0c;打印两个链表…
阅读更多...
实现简易开屏弹窗

实现简易开屏弹窗

要实现一个简易的开屏弹窗&#xff0c;并展示一些文章内容&#xff0c;以下是一个简单的HTML和CSS实现。这个弹窗会在页面加载时显示&#xff0c;并包含一个标题和一些文章内容。用户可以点击按钮关闭弹窗&#xff0c;关闭后&#xff0c;弹窗的状态会保存在浏览器的 sessionSto…
阅读更多...
WPF之iconfont（字体图标）使用

WPF之iconfont（字体图标）使用

1&#xff0c;前文&#xff1a; WPF的Xaml是与前端的Html有着高度相似性的标记语言&#xff0c;所以Xaml也可同Html一般轻松使用阿里提供的海量字体图标&#xff0c;从而有效的减少开发工作度。 2&#xff0c;下载字体图标&#xff1a; 登录阿里图标库网iconfont-阿里巴巴矢量…
阅读更多...
图神经网络（GNN）入门笔记（2）——从谱域理解图卷积，ChebNet和GCN实现

图神经网络（GNN）入门笔记（2）——从谱域理解图卷积，ChebNet和GCN实现

一、谱域图卷积&#xff08;Spectral Domain Graph Convolution&#xff09; 与谱域图卷积&#xff08;Spectral Domain Graph Convolution&#xff09;对应的是空间域&#xff08;Spatial Domain&#xff09;图卷积。本节学习的谱域图卷积指的是通过频率来理解卷积的方法。 …
阅读更多...
leetcode92:反转链表||

leetcode92:反转链表||

给你单链表的头指针 head 和两个整数 left 和 right &#xff0c;其中 left < right 。请你反转从位置 left 到位置 right 的链表节点&#xff0c;返回 反转后的链表 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], left 2, right 4 输出&#xff1a;[1,4,3,2…
阅读更多...
知识图谱是如何通过数据集构建的，比如通过在MSCOCO和Flickr30k数据集和Visual Genome数据集

知识图谱是如何通过数据集构建的，比如通过在MSCOCO和Flickr30k数据集和Visual Genome数据集

系列博客目录 文章目录 系列博客目录1. 数据准备与实体识别2. 关系抽取3. 图结构构建4. 图嵌入学习5. 知识图谱存储与查询示例&#xff1a;通过 Visual Genome 构建一个简单的知识图谱 构建知识图谱通常涉及从数据集中提取实体和关系&#xff0c;并将其结构化为图的形式。在 MS…
阅读更多...
Python-安装与PyCharm的安装配置(1)

Python-安装与PyCharm的安装配置(1)

目录 安装 打开运行 PyCharm的安装 新建项目 安装 找到官网下载对应的电脑对应的版本 Welcome to Python.org -- 官网 下载稳定版的 安装记得勾选配置环境&#xff0c;这样自己就不需要再配置环境了 安装成功 至此python的运行环境就安装好了 打开运行 在开始菜单中可以…
阅读更多...
XGBoost算法Python代码实现（单棵树类）

XGBoost算法Python代码实现（单棵树类）

### XGBoost单棵树类 class XGBoost_Single_Tree(BinaryDecisionTree):# 结点分裂方法def node_split(self, y):# 中间特征所在列feature int(np.shape(y)[1]/2)# 左子树为真实值&#xff0c;右子树为预测值y_true, y_pred y[:, :feature], y[:, feature:]return y_true, y_p…
阅读更多...
python的编程基础分支，循环与函数的应用知识

python的编程基础分支，循环与函数的应用知识

编程基础是学习任何编程语言的必备知识之一。在Python中&#xff0c;分支、循环和函数是常用的编程概念&#xff0c;它们可以让我们编写出更复杂、更灵活的程序。 分支 分支是根据条件来决定程序执行的不同路径。在Python中&#xff0c;我们使用if语句来实现分支。 if 条件:# …
阅读更多...
营业执照OCR识别API接口如何用C#调用

营业执照OCR识别API接口如何用C#调用

服务器和计算设备的性能不断提升&#xff0c;为 OCR 识别提供了更强大的计算能力支持。更快的 CPU、GPU 以及分布式计算技术的应用&#xff0c;使得营业执照图片的处理速度大幅加快&#xff0c;能够在更短的时间内完成大量营业执照的识别工作。 研发人员不断对 OCR 识别算法进…
阅读更多...
qt QLocale详解

qt QLocale详解

1、概述 QLocale是Qt框架中的一个类&#xff0c;用于处理与本地化相关的操作。它能够方便地实现日期、时间、数字和货币的格式化和解析&#xff0c;支持不同的语言、区域设置和字符集。QLocale提供了一种跨平台的方式来获取当前系统的语言设置&#xff0c;并返回该语言的本地化…
阅读更多...
微服务架构面试内容整理-Eureka

微服务架构面试内容整理-Eureka

Spring Cloud Netflix 是一个为构建基于 Spring Cloud 的微服务应用提供的解决方案，利用 Netflix 的开源组件来实现常见的分布式系统功能。以下是 Spring Cloud Netflix 的一些主要组件和特点： 服务注册与发现：Eureka 是一个 RESTful 服务，用于注册和发现微服务。服务实例在…
阅读更多...
缓存、注解、分页

缓存、注解、分页

一.缓存 作用&#xff1a;应用查询上&#xff0c;内存中的块区域。 缓存查询结果&#xff0c;减少与数据库的交互&#xff0c;从而提高运行效率。 1.SqlSession 缓存 1. 又称为一级缓存&#xff0c;mybatis自动开启。 2. 作用范围&#xff1a;同一…
阅读更多...
uniapp vue3 使用echarts-gl 绘画3d图表

uniapp vue3 使用echarts-gl 绘画3d图表

我自己翻遍了网上&#xff0c;以及插件市场&#xff0c;其实并没有uniapp 上使用echarts-gl的样例&#xff0c;大多数都是使用插件市场的echarts的插件 开始自己尝试直接用echartsgl 没有成功&#xff0c;后来尝试使用threejs 但是也遇到一些问题&#xff0c;最后我看官网的时…
阅读更多...
【言语理解】片段阅读整体概述

【言语理解】片段阅读整体概述

1.1 题型分类 片段阅读一般有以下六种&#xff1a; 中心理解题 “这段文字意在说明&#xff1a;” “这段文字意在强调&#xff1a;” “这段文字主要介绍了&#xff1a;” “下列对文意概括最恰当的是&#xff1a;”标题拟定题 “最适合做这段文字标题的是&#xff1a;”下文…
阅读更多...
linux搭建大数据环境

linux搭建大数据环境

前期准备工作 友情提醒提前安装好vmware软件,准备好连接虚拟机的客户端 一. 基础环境 1.配置ip地址 修改ip配置文件 [rootnode1 /]# vim /etc/sysconfig/network-scripts/ifcfg-ens33 TYPE"Ethernet" PROXY_METHOD"none" BROWSER_ONLY"no" # …
阅读更多...
什么是 OpenTelemetry？

什么是 OpenTelemetry？

OpenTelemetry 定义 OpenTelemetry (OTel) 是一个开源可观测性框架&#xff0c;允许开发团队以单一、统一的格式生成、处理和传输遥测数据&#xff08;telemetry data&#xff09;。它由云原生计算基金会 (CNCF) 开发&#xff0c;旨在提供标准化协议和工具&#xff0c;用于收集…
阅读更多...
ESP32 gptimer通用定时器初始化报错：assert failed: timer_ll_set_clock_prescale

ESP32 gptimer通用定时器初始化报错：assert failed: timer_ll_set_clock_prescale

背景&#xff1a;IDF版本V5.1.2 &#xff0c;配置ESP32 通用定时器&#xff0c;实现100HZ&#xff0c;占空比50% 的PWM波形。 根据乐鑫官方的IDF指导文档设置内部计数器的分辨率&#xff0c;计数器每滴答一次相当于 1 / resolution_hz 秒。 &#xff08;ESP-IDF编程指导文档&a…
阅读更多...
AIGC在游戏设计中的应用及影响

AIGC在游戏设计中的应用及影响

文章目录 一、AIGC的基本概念与背景AIGC的主要应用领域AIGC技术背景 二、AIGC在游戏设计中的应用1. 自动化游戏地图与关卡设计示例&#xff1a;自动生成2D平台游戏关卡 2. 角色与物品生成示例&#xff1a;使用GAN生成虚拟角色 3. 游戏剧情与任务文本生成示例&#xff1a;基于GP…
阅读更多...
最新文章

Copyright @ 2022~2023