目錄

一. 案例一：用戶更換個人頭像

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，代表文件請求對應的后端接口地址，如果需要動態拼接的話，可以加上冒號和飄號`。

結語

以上就是element-plus中，Upload上傳組件的使用 + 后端處理的大致流程。

這只是一個啟蒙案例，后期可以自己精進。

喜歡本篇文章的話，可以留個免費的關注~~