---

一、安裝Element Plus

使用 Element Plus 組件庫來實現上傳照片和回顯同樣很簡單，你可以按照以下步驟進行：

1. 安裝 Element Plus：首先，確保你已經安裝了 Element Plus。你可以在 Vue 3 項目中使用 npm 或 yarn 來安裝 Element Plus：

   npm install element-plus --save
   

   或者

   yarn add element-plus
   

2. 引入 Element Plus：在你的 Vue 3 項目中的 main.js 文件中引入 Element Plus 并注冊組件庫中的組件：

   import { createApp } from 'vue'
   import ElementPlus from 'element-plus';
   import 'element-plus/lib/theme-chalk/index.css';const app = createApp(App)
   app.use(ElementPlus)
   app.mount('#app')
   

3. 創建上傳組件：在 Vue 3 中使用 Element Plus 的 Upload 組件來實現上傳照片功能，同時使用 Image 組件來顯示上傳的照片。

4. 處理文件上傳：在上傳組件中，可以使用 Upload 組件的 file-list 屬性來綁定一個文件列表，當用戶上傳文件時，該列表會自動更新。你可以在 Image 組件中使用這個文件列表來顯示上傳的照片。

二、案例

1、基本示例

下面是一個簡單的示例代碼，演示了如何在 Vue 3 中使用 Element Plus 實現上傳照片以及回顯：

<template><div><el-uploadaction="#改為你上傳服務URL路徑" :file-list="fileList":on-change="handleFileUpload"><el-button type="primary">點擊上傳</el-button></el-upload><el-imagev-if="imageUrl":src="imageUrl"style="width: 100px; height: 100px; margin-top: 10px;"></el-image></div>
</template><script>
import { ref } from 'vue';export default {name: 'PhotoUpload',setup() {const fileList = ref([]);const imageUrl = ref('');const handleFileUpload = (file, fileList) => {imageUrl.value = URL.createObjectURL(file.raw);};return {fileList,imageUrl,handleFileUpload};}
};
</script>

在這個示例中，我們使用了 Element Plus 的 Upload 組件來實現文件上傳，通過綁定 file-list 屬性來控制文件列表。在 handleFileUpload 方法中，我們監聽 Upload 組件的 change 事件，獲取上傳的文件，并使用 URL.createObjectURL 方法生成一個臨時的 URL，然后將其賦值給 imageUrl 數據，以在頁面上顯示照片。

三、進階案例

1、代碼

<template><!-- 提交表單 --><div><el-form-item label="頭像"><el-uploadclass="avatar-uploader"action="#改為你上傳的文件路徑":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload":data="imageFormData"name="files"accept="image/*"><img v-if="imageUrl" :src="imageUrl" class="avatar" /><el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon></el-upload></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">提交</el-button></el-form-item></el-form></div>
</template><script  setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import axios from "axios";//提交表單數據
const formInline = ref({});
//照片
const imageUrl = ref("");
//上傳圖片表單
const imageFormData = ref({type: "picture",
});
//記錄圖片ID
const imageId = ref("");const handleAvatarSuccess = (response, file) => {console.log("response=", response);console.log("file=", file);console.log("上傳成功后的id=", response.data[0]);imageId.value = response.data[0];//回顯圖片getImage(imageId.value);
};//調用圖片
const getImage = async (id) => {//根據ID調用接口獲取圖片try {const imageInfo = await axios.get("#改為你調用文件服務的接口地址" + id, {responseType: "blob",headers: {Accept:"image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8",},}).then((response) => {const blob = new Blob([response.data], { type: "image/*" });imageUrl.value = URL.createObjectURL(blob);});} catch (error) {console.error("獲取數據失敗", error);}
};//校驗文件
const beforeAvatarUpload = (rawFile) => {if (!rawFile.type.startsWith("image/")) {ElMessage.error("請上傳圖片！");return false;} else if (rawFile.size / 1024 / 1024 > 2) {ElMessage.error("圖片大小不能超過2MB！");return false;}return true;
};const onSubmit = () => {console.log("onSubmit");
};</script><style>
.avatar-uploader .el-upload {border: 1px dashed var(--el-border-color);border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;transition: var(--el-transition-duration-fast);
}.avatar-uploader .el-upload:hover {border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {font-size: 28px;color: #000;width: 100px;height: 100px;text-align: center;
}
.avatar-uploader .avatar {width: 100px;height: 100px;
}
</style>

2、代碼解釋

1、上傳接口展示

1. 接口中要求傳入表單數據因此我使用了data屬性。
2. 接口要求文件的屬性名為files，因此我用了name屬性默認值為file，我重新賦值files。
3. 這里的文件上傳應用場景是圖片因此我用了accept屬性配置內容為屬性。
   

2、查詢接口展示

回顯圖片我用了調用接口方式，返回的內容為圖片因此需要配置請求參數responseType

組件屬性

3、效果展示

---

1. 積極進取：勇敢邁出第一步，成功就在前方等待著你。
2. 持之以恒：堅持不懈，才能攀登到人生的高峰。
3. 自信自強：相信自己的能力，你就已經走出了成功的第一步。
4. 心懷感恩：感恩生活中的每一個美好，懂得感恩，才能更加幸福。
5. 勇敢面對：面對困難，不要退縮，因為你比困難更強大。
6. 堅定目標：設立明確的目標，為之努力奮斗，成功必將如期而至。
7. 學無止境：不斷學習、不斷進步，才能不斷提升自我。
8. 團結合作：團結一心，共同進步，困難會迎刃而解。
9. 積極樂觀：樂觀面對生活，陽光總在風雨后。
10. 勤奮拼搏：勤奮是通往成功的唯一道路，拼搏是成功的最好伴侶。