上传头像upload的简易方法,转base64调接口的

1.首页使用el-image显示数据,用的是转base64后端返给的

javascript 复制代码
 <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.在添加的页面上的操作

javascript 复制代码
//写好组件
 <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 = ''

//存放图片的list
  private 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 < 5
    if (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 = true
      this.getBase64(file.raw).then((res) => {
        this.icon = res
      })
    }
  }




//再打开编辑的时候需要的操作
//判断带过来的图片有没有base64数据,有就返回它,在dialog显示,没有就清空,解决空白图片问题
 if (rowData.avatar) {
        this.file_list = [{ url: rowData.avatar }]
      } else {
        this.file_list = []
      }
相关推荐
驭风少年君4 小时前
《搭建属于自己的网站之网页前端学习》基础入门
前端·学习
刘一说5 小时前
深入理解 Spring Boot 嵌入式 Web 容器:从原理到性能调优
前端·spring boot·firefox
你的人类朋友5 小时前
设计模式的原则有哪些?
前端·后端·设计模式
!执行6 小时前
Web3 前端与合约交互
前端·web3·1024程序员节
潘小安6 小时前
跟着 AI 学(二)- Quill 接入速通
前端
十里-6 小时前
在 Vue2 中为 Element-UI 的 el-dialog 添加拖拽功能
前端·vue.js·ui
shada6 小时前
从Google Chrome商店下载CRX文件
前端·chrome
左耳咚6 小时前
项目开发中从补码到精度丢失的陷阱
前端·javascript·面试
D_C_tyu7 小时前
Vue3 + Element Plus 实现前端手动分页
javascript·vue.js·elementui
黑云压城After7 小时前
vue2实现图片自定义裁剪功能(uniapp)
java·前端·javascript