element-plus中，Upload上传组件的使用 + 后端处理

一. 案例一：用户更换个人头像

1.前端实现

2.后端实现

①引入阿里云oss的依赖

②编写AliOSSUtils工具类

③编写controller层

④编写service层

⑤编写mapper层

3.效果展示

4.重点理解

结语

一. 案例一：用户更换个人头像

1.前端实现

<!-- 预览登录用户头像的弹窗 -->
<el-dialogv-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);//生成文件访问路径urlString url = endpoint.split("//")[0] + "//" + bucketName + "." + endpoint.split("//")[1] + "/" + fileName;//关闭ossClientossClient.shutdown();//返回该文件的urlreturn 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的实例@Autowiredprivate 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，代表文件请求对应的后端接口地址，如果需要动态拼接的话，可以加上冒号和飘号`。