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

yagami 發布于2019-08-26 10:57 / 2657人閱讀

摘要：轉上傳附件轉文件流傳入一個參數對象即可得到基于該參數對象的文本內容該屬性表示目標對象的轉轉轉使用例子

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")
    })
})

GPU云服務器云服務器 base64轉圖像c語言 base64上傳oss base64編解碼c語言實現 base64

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106880.html

blob和base64轉文件并通過ajax上傳到服務器

摘要：有時候，我們不想通過上傳本地圖片的方式上傳圖片，而是通過相機拍照，將這個拍照后的圖片直接上傳到服務器上，不需要保存到本地。現在我們來通過的或者方法對象對象來通過上傳圖片。有時候，我們不想通過上傳本地圖片的方式上傳圖片，而是通過相機拍照，將這個拍照后的圖片直接上傳到服務器上，不需要保存到本地。比如，用video模擬一個攝像頭，通過webrtc調用攝像頭的方式拍一張照，然后通過canva...

bingchen 2019-08-19 10:26 評論0 收藏0
blob和base64轉文件并通過ajax上傳到服務器

摘要：有時候，我們不想通過上傳本地圖片的方式上傳圖片，而是通過相機拍照，將這個拍照后的圖片直接上傳到服務器上，不需要保存到本地。現在我們來通過的或者方法對象對象來通過上傳圖片。有時候，我們不想通過上傳本地圖片的方式上傳圖片，而是通過相機拍照，將這個拍照后的圖片直接上傳到服務器上，不需要保存到本地。比如，用video模擬一個攝像頭，通過webrtc調用攝像頭的方式拍一張照，然后通過canva...

tuomao 2019-08-26 10:42 評論0 收藏0
你知道前端對圖片的處理方式嗎？

摘要：對于第二種存儲方式，我們前端需要將其二進制流交由對象處理，然后通過的生成臨時賦值給屬性來顯示。當后端返回特定的圖片二進制流的時候，就像我第一里的情景再現說的，前端用容器接收。前言作為前端工程師 de 我們，日常少不了會跟圖片打交道。在各大電商平臺工作的前端工程師們，感受可能會更加的明顯。以下是我之前跟圖片打交道踩到的坑，跟大家分享一下經驗。一、情景再現用postman請求接口...

LiuRhoRamen 2019-08-30 15:55 評論0 收藏0
你知道前端對圖片的處理方式嗎？

摘要：對于第二種存儲方式，我們前端需要將其二進制流交由對象處理，然后通過的生成臨時賦值給屬性來顯示。當后端返回特定的圖片二進制流的時候，就像我第一里的情景再現說的，前端用容器接收。前言作為前端工程師 de 我們，日常少不了會跟圖片打交道。在各大電商平臺工作的前端工程師們，感受可能會更加的明顯。以下是我之前跟圖片打交道踩到的坑，跟大家分享一下經驗。一、情景再現用postman請求接口...

Zachary 2019-08-02 14:20 評論0 收藏0