上传头像upload的简易方法，转base64调接口的
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 = []}