vue上传图片,并获取该图片的base64

<div>
  <el-button
    type="primary"
    size="mini"
    @click="reupload"
  >
    <i class="el-icon-upload el-icon--right"> 上传文件 </i>
  </el-button>
</div>
// 上传文件
reupload() {
    
    
  const input = document.createElement('input')
  input.type = 'file'
  input.onchange = () => {
    
    
    const fileData = input.files[0]
    if (!/\.(jpg|png|pdf)$/.test(fileData.name.toLowerCase())) {
    
    
      this.$refs.Logs.writeLog('格式错误,请上传jpg、png、pdf格式的文件', false)
      this.showConsole = false
      return
    }
    const reader = new FileReader()
    reader.readAsDataURL(fileData) // 异步读取文件内容,结果用data:url的字符串形式表示
    /* 当读取操作成功完成时调用*/
    reader.onload = async(e) => {
    
    
      console.log(e) // 查看对象属性里面有个result属性,属性值,是一大串的base64格式的东西,这个就是我们要的图片
      const base64Str = reader.result // 取得数据 这里的this指向FileReader()对象的实例reader
      console.log(base64Str , 'base64Str')
      //this.returnMsg.returnFile = ''
      //this.returnMsg.returnFile = base64Str
    }
  }
  const event = new MouseEvent('click')
  input.dispatchEvent(event)
},

猜你喜欢

转载自blog.csdn.net/qq_42048638/article/details/120998849