要解決Vue和Element Plus中的圖片上傳和回顯問題，你可以按照以下步驟進行操作：
1. 安裝Element Plus：確保你已經安裝了Element Plus庫，你可以通過npm或者yarn來安裝。
npm install element-plus
2. 創建一個包含圖片上傳組件的Vue文件（例如UploadImage.vue）。
在該組件中，引入Element Plus中的上傳組件，并設置相應的屬性和事件監聽器。
<template><el-upload
action="/upload" <!-- 設置圖片上傳的接口地址 -->
:on-success="handleSuccess" <!-- 成功上傳后的回調函數 -->
:show-file-list="false" <!-- 是否顯示已上傳文件列表，根據需求設置 -->
>
<el-button slot="trigger" size="small" type="primary">選擇文件</el-button>
</el-upload>
<img v-if="imageUrl" :src="imageUrl" alt="Uploaded Image">
</template>
<script>
export default {
data() {
return {
imageUrl: ''
};
},
methods: {
handleSuccess(response, file) {
// 上傳成功后獲取服務器返回的圖片URL，并將其賦值給imageUrl
this.imageUrl = response.url;
}
}
};
</script>
3. 在需要使用圖片上傳的頁面中引入和使用該組件。
<template><div>
<upload-image></upload-image>
</div>
</template>
<script>
import UploadImage from './components/UploadImage.vue';
export default {
components: {
UploadImage
}
};
</script>
4. 根據你的需求，將上傳的圖片保存到服務器上，并返回圖片的URL。
在示例中，上傳接口被設置為/upload，你需要在后端實現該接口來處理圖片上傳和返回圖片URL的邏輯。
在成功上傳后，通過回調函數handleSuccess獲取服務器返回的圖片URL，并將其賦值給組件的imageUrl屬性。
5. 圖片回顯：使用<img>標簽來顯示已上傳的圖片。通過Vue的條件渲染指令v-if判斷是否存在圖片URL，如果存在則顯示圖片，否則不顯示。
你可以根據自己的項目需求，在<img>標簽中添加相應的樣式和屬性。
以上就是解決Vue和Element Plus中圖片上傳及回顯問題的基本步驟。根據你的實際需求進行適當的調整和擴展。
