VUE Base64編碼圖片展示與轉換圖片

圖片的 base64 編碼就是可以將一副圖片數據編碼成一串字符串，使用該字符串代替圖像地址，使用 base64 傳輸圖片文件可以節省一個 http 請求，圖片的 base64 編碼可以算是前端優化的一環

VUE Base64編碼圖片展示

<img :src="icon">

export default {
   data() {
      icon: 'data:image/png;base64,,XXXXX...',
   }
}

圖片在線轉換Base64：http://imgbase64.duoshitong.com/

Base64編碼轉換圖片

base64ImgtoFile(dataurl, filename = 'file') {
  let arr = dataurl.split(',')
  let mime = arr[0].match(/:(.*?);/)[1]
  let suffix = mime.split('/')[1]
  let bstr = atob(arr[1])
  let n = bstr.length
  let u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], `${filename}.${suffix}`, {
    type: mime
  })
}，

// base64編碼的圖片
var base64Img = 'data:image/png;base64,XXXXX...';
//轉換圖片文件
var imgFile = this.base64ImgtoFile(base64Img); 

文件轉換base64編碼

<el-upload
         class="avatar-uploader"
         action=""
         ref="uploadAvatar"
         :show-file-list="false"
         :auto-upload="false"
         :on-change="changeFile">
     <img v-if="imageUrl" :src="imageUrl" class="uploadAvatar">
     <i v-else class="el-icon-plus avatar-uploader-icon"></i>
 </el-upload>

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

 /**
 * 文件框改變事件
 * @param file
 * @param fileList
 */
changeFile(file, fileList) {
    const isJPGORPNG = (file.raw.type === 'image/jpeg' || file.raw.type === 'image/png');
    const isLt1M = file.size / 1024 / 1024 < 1;

    if (!isJPGORPNG) {
        this.$message.info('上傳頭像圖片只能是 JPG 或 PNG 格式!');
        return;
    }
    if (!isLt1M) {
        this.$message.info('上傳頭像圖片大小不能超過 1MB!');
        return;
    }

    var This = this;
    var reader = new FileReader();
    reader.readAsDataURL(file.raw);
    reader.onload = function(e){
        this.result; //base64編碼
        This.imageBaseUrl = this.result;
        This.imageUrl = this.result;
    }
},

更便捷的圖片轉化Base64編碼方式

利用 Chrome 瀏覽器，在 chrome 下新建一個窗口，然后把要轉化的圖片直接拖入瀏覽器，打開控制台，點 Source，如下圖所示，點擊圖片，右側就會顯示該圖片的 base64 編碼