Element-ui手動上傳base64圖片

<template>

<el-upload
  class="avatar-uploader"
  action="#"
  :show-file-list="false"
  :http-request="getFileMsg">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

<button @click="submit">獲取圖片base64串</button>
</template>
export default{

   data() {
      return {
        imageUrl: ''
      }
    },


methods: {
      submit(){
        console.log('圖片base64串'+this.imageUrl);
      },
      getFileMsg(content) {
        console.log(content);

        this.getBase64(content.file).then(res => {
         
          this.imageUrl = res;
        })
      },
      // 轉換base64格式
      getBase64(file) {
        return new Promise(function (resolve, reject) {
          let 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);
          };
        });
      },


    }

}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章