1.首頁使用el-image顯示數據，用的是轉base64后端返給的

 <el-table-column prop="avatar" align="center" label="頭像"><template #default="scope"><el-image style="height: 40px;width: 40px;" :src="scope.row.avatar"></el-image></template></el-table-column>private url = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'

2.在添加的頁面上的操作

//寫好組件<el-upload class="upload-demo" ref="upload" action="" :on-remove="handleRemove" :file-list="file_list" :on-change="getFile":auto-upload="false" list-type="picture" :limit="1"><el-button size="small" type="primary">上傳人物頭像</el-button></el-upload>//存放base64最后放接口里的private icon: any = ''//存放圖片的listprivate file_list: any[] = []// 移除上傳的文件時的回調private handleRemove() {this.icon = ''this.$delete(this.file_list, 0)}// 圖片轉base64  核心private getBase64(file) {return new Promise(function (resolve, reject) {let reader = new FileReader()let imgResult = ''reader.readAsDataURL(file)reader.onload = function () {imgResult = reader.result as any}reader.onerror = function (error) {reject(error)}reader.onloadend = function () {resolve(imgResult)}})}//  當文件狀態改變、添加文件、上傳成功和上傳失敗時調用，控制大小和類型private getFile(file, fileList) {let fileType = file.name.substring(file.name.lastIndexOf('.') + 1)let fileSize = file.size / 1024 / 1024 < 5if (fileType !== 'png' && fileType !== 'jpg' && fileType !== 'jpeg') {;(this.$refs.upload as any).clearFiles()ElMessage({message: '上傳文件只能是 .png、.jpg、jpeg格式!',type: 'warning'})return false} else if (!fileSize) {;(this.$refs.upload as any).clearFiles()ElMessage({message: '上傳文件大小不能超過 5MB!',type: 'warning'})return false} else {// this.isImage = truethis.getBase64(file.raw).then((res) => {this.icon = res})}}//再打開編輯的時候需要的操作
//判斷帶過來的圖片有沒有base64數據，有就返回它，在dialog顯示，沒有就清空，解決空白圖片問題if (rowData.avatar) {this.file_list = [{ url: rowData.avatar }]} else {this.file_list = []}