FileReader解析圖片(Base64格式)

有時需要將小圖片轉化爲base64格式保存使用,可使用以下方式
不推薦轉化較大的圖片,較大圖片轉化後編碼較長,JSON.stringify()可能會失敗!

// 查看瀏覽器是否支持該解析方式
fileReaderImage () {
  if (typeof FileReader === 'undefined') {
    this.dialogClose()
    alert('您的瀏覽器暫不支持FileReader圖片解析')
  return
  }
  // uploadFiles爲圖片數組(這裏使用 ES6 的 of 方法遍歷數組)
  for (let item of this.uploadFiles) {
    // 使用H5的文件讀取來解析圖片爲Base64格式
    // 應創建多個FileReader,onload()爲異步回調,循環結束時可能還未處理完。
    // 此時若使用一個FileReader,則會提示 It is busy。
    let reader = new FileReader()
    reader.readAsDataURL(item.raw)
    const self = this
    reader.onload = function () {
      // 若只需base64編碼部分,可以根據 ',' 進行分割取後面部分即可 
      let temp = reader.result.split(',')
      // 無法直接使用this
      self.imageFileList.push(temp[1])
    }
  }
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章