javascript實現上傳文件流file轉base64，base64轉blob，blob轉url訪問地址

file轉base64

/**
 * 上傳附件轉base64
 * @param {File} file 文件流
 */
export const fileByBase64 = (file, callback) => {
  var reader = new FileReader();
  // 傳入一個參數對象即可得到基於該參數對象的文本內容
  reader.readAsDataURL(file);
  reader.onload = function (e) {
    // target.result 該屬性表示目標對象的DataURL
    console.log(e.target.result);
    callback(e.target.result)
  };
}

base64轉blob

/**
 * base64轉Blob
 * @param {*} data 
 */
export const base64ByBlob = (base64, callback) => {
  var arr = base64.split(','), mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  console.log(new Blob([u8arr], { type: mime }))
  callback(new Blob([u8arr], { type: mime }))
}

blob轉url

var url = window.URL.createObjectURL(blob)

es6使用例子

fileByBase64(file, (base64) => {
    base64ByBlob(base64, (blob => {
      console.log(blob, 'blob')
      var url = window.URL.createObjectURL(blob)
      console.log(url, 'url')
    })
})