element-plus中，Upload上传组件的使用 + 后端处理
目录
一. 案例一：用户更换个人头像
1.前端实现
2.后端实现
①引入阿里云oss的依赖
②编写AliOSSUtils工具类
③编写controller层
④编写service层
⑤编写mapper层
3.效果展示
4.重点理解
结语
一. 案例一：用户更换个人头像
1.前端实现
<!-- 预览登录用户头像的弹窗 -->
<el-dialog
v-model="showAvatar"
title="头像预览"
width="30%"
append-to-body
>
<!-- 文件上传组件 -->
<el-upload
:action="`http://localhost:8848/api/user/${user.id}/updateUserAvatar`"
name="userAvatar"
:show-file-list="false"
:before-upload="beforeUpload"
:on-success="handleAvatarSuccess"
>
<!-- 当前的用户头像 -->
<!-- 如果此时该用户有头像，则显示头像 -->
<img v-if="user.avatar != null" :src=user.avatar alt="头像" title="点击更换头像" style="width: 100%;"/>
<!-- 如果此时该用户没有头像，则显示自定义span -->
<span v-else style="display: inline-block;width:480px;height:300px;background-color: #EEEEEE;" title="暂无头像，点击上传头像">
<el-icon style="margin-top: 140px;margin-left:230px"><icon-picture /></el-icon>
</span>
</el-upload>
</el-dialog>
<script setup>
import {ref} from 'vue'
/* 导入element-plus图标 */
import { Picture as IconPicture } from '@element-plus/icons-vue'
/* 使用pinia的UserStore.js中的数据user */
import userStore from "@/store/UserStore";
const userStoreInfo = userStore();
const user = userStoreInfo.user;//该user中，存储了当前用户的全部信息（包含用户头像url）。
//alert(JSON.stringify(user))
//头像上传前的检查工作（控制哪些类型的文件能上传）
const beforeUpload = (file) => {
// 允许的文件类型
const allowedTypes = ['image/png', 'image/jpg', 'image/jpeg'];
const isLt2M = file.size / 1024 / 1024 < 2;
if (!allowedTypes.includes(file.type)) {
/* alert('只能上传 PNG、JPG 或 JPEG 格式的文件'); */
//提示错误信息
ElMessage.error("只能上传 PNG、JPG 或 JPEG 格式的图片~")
//阻止上传
return false;
}
if (!isLt2M) {
/* alert('头像图片大小不能超过 2MB'); */
//提示错误信息
ElMessage.error("图片大小不能超过 2MB~")
//阻止上传
return false;
}
//如果满足上述的所有请求，则允许上传
return true;
};
//更改用户头像成功后，触发的函数
const handleAvatarSuccess = (response, uploadFile) => {
//alert(JSON.stringify(response));
//alert(JSON.stringify(uploadFile));
//提示更换头像成功
ElMessage.success(response.message);
//将pinia的userStore.js中的当前登录用户的头像改成最新的
user.avatar = response.data;
//关闭头像预览对话框
showAvatar.value = false;
}
</script>解读：
①<el-upload></el-upload>是文件上传组件，该标签包着啥并不重要，重要的是一点击就会让你选择本地图片。
②:action表示该上传文件的请求对应的后端接口，不受axios的公共前缀影响，因此要写全后端接口地址。选择本地图片后，自动就会发出这个请求，我们无需操作。
③name="userAvatar"表示该文件对象的名称，后端使用@RequestParam("userAvatar") MultipartFile userAvatar来接收这个文件对象。
④:before-upload表示发送文件上传请求前，要进行的检查工作，比如：文件格式、大小是否符合我们的预期，如果不符合直接拦截。
⑤:on-success表示文件上传成功后，触发的函数，我们在里面可以来点成功提示等等。
2.后端实现
①引入阿里云oss的依赖
<!--阿里云OSS存储所需的四个依赖（JDK版本是17的话，对应这四个依赖）-->
<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun-sdk-oss</artifactId>
<version>3.17.4</version>
</dependency>
<dependency>
<groupId>javax.xml.bind</groupId>
<artifactId>jaxb-api</artifactId>
<version>2.3.1</version>
</dependency>
<dependency>
<groupId>javax.activation</groupId>
<artifactId>activation</artifactId>
<version>1.1.1</version>
</dependency>
<dependency>
<groupId>org.glassfish.jaxb</groupId>
<artifactId>jaxb-runtime</artifactId>
<version>2.3.3</version>
</dependency>②编写AliOSSUtils工具类
/**
* 阿里云 OSS 工具类：将前端发送的文件对象传入该工具类的静态方法upload中，就会将其存入阿里云oss并返回其url地址。
*/
@Component //将该工具类交给spring的IOC容器管理，使用时直接注入即可
public class AliOSSUtils {
private String endpoint = "https://oss-cn-beijing.aliyuncs.com";//这是北京，根据自己的来
private String accessKeyId = "你自己的ID";
private String accessKeySecret = "你自己的Secret";
private String bucketName = "你自己的bucket";
/**
* 实现上传图片到OSS
*/
public String upload(MultipartFile file) throws IOException {
//获取上传的文件的输入流
InputStream inputStream = file.getInputStream();
//避免文件覆盖(生成唯一的文件名：UUID)
String originalFilename = file.getOriginalFilename();//获取原文件的名称
String fileName = UUID.randomUUID().toString() + originalFilename.substring(originalFilename.lastIndexOf("."));
//上传文件到 阿里云OSS服务器
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
ossClient.putObject(bucketName, fileName, inputStream);
//生成文件访问路径url
String url = endpoint.split("//")[0] + "//" + bucketName + "." + endpoint.split("//")[1] + "/" + fileName;
//关闭ossClient
ossClient.shutdown();
//返回该文件的url
return url;
}
}③编写controller层
/**
* 更改用户头像（文件上传一般都用Post请求）
*/
@PostMapping ("/{id}/updateUserAvatar")
public Result updateUserAvatar(@PathVariable Integer id, @RequestParam("userAvatar") MultipartFile userAvatar) throws IOException {
//System.out.println(id + "+" + userAvatar.getOriginalFilename());
String avatarUrl = userService.updateUserAvatar(id, userAvatar);
if(avatarUrl !=null){
return new Result(200, "更换头像成功", avatarUrl);
}else{
return new Result(400, "更换头像失败");
}
}④编写service层
service层：
//更改用户头像
public String updateUserAvatar(Integer id, MultipartFile userAvatar) throws IOException;serviceImpl层：
//注入工具类AliOSSUtils的实例
@Autowired
private AliOSSUtils aliOSSUtils;
//更改用户头像
public String updateUserAvatar(Integer id, MultipartFile userAvatar) throws IOException {
//将前端传来的图片，存入阿里云平台，并获取该图片的url地址
String avatarUrl = aliOSSUtils.upload(userAvatar);
System.out.println("最新的头像url:" + avatarUrl);
//将该用户的最新头像的url存入数据库
int i = userMapper.updateUserAvatar(id, avatarUrl);
//返回最新头像的url地址
return avatarUrl;
}⑤编写mapper层
//根据id，修改用户头像
@Update("update user set avatar = #{avatarUrl} where id = #{id}")
public int updateUserAvatar(Integer id, String avatarUrl);3.效果展示
4.重点理解
①前端el-upload的name属性，表示上传的文件对象的名称，后端就要用该名称来接收，如下：
②后端接收文件对象的类型为MultipartFile，这是Spring官方定义的。下面是该类型的几种方法：
③要理解AliOSSUtils工具类的核心：接收一个文件对象，将其存入阿里云OSS中，并返回其URL地址。
④我们在service层中，将前端传来的头像存入阿里云oss并获得其url后，应该将这个url存入数据库中，这样我们就可以查询数据库中的url来展示在前端页面中。
⑤前端发送文件上传请求的时机：当用户选择一个图片后，就会自动发出请求，我们无需插手。（后期也可以自定义触发时机）
⑥文件上传一般都是发送post请求。
⑦el-upload组件的action，代表文件请求对应的后端接口地址，如果需要动态拼接的话，可以加上冒号和飘号`。
结语
以上就是element-plus中，Upload上传组件的使用 + 后端处理的大致流程。
这只是一个启蒙案例，后期可以自己精进。
喜欢本篇文章的话，可以留个免费的关注~~