将图片文件对象转为base64

101 阅读1分钟
          <el-upload
            action="#"
            ref="uploadRef"
            :auto-upload="false"
            :on-change="changeFile"
            :show-file-list="false"
            class="img-uploader"
          >
            <img v-if="dialogProduct.logo" :src="dialogProduct.logo" class="img" />
            <el-icon v-else class="img-uploader-icon"><Plus /></el-icon>
          </el-upload>



const changeFile = file => {
  console.log(file)
  // 文件格式及大小校验、获取base64
  verifyFile(file.raw)
    .then(() => {
      getBase64(file.raw).then(res => {
        dialogProduct.logo = res
      })
    })
    .catch(err => {
      ElMessage.error(err)
    })
}
// 用于获取base64字符
const getBase64 = file => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    let imgResult = ''
    reader.readAsDataURL(file)
    reader.onload = function () {
      imgResult = reader.result
    }
    reader.onerror = function (error) {
      reject(error)
    }
    reader.onloadend = function () {
      resolve(imgResult)
    }
  })
}