javascript實現(xiàn)上傳文件流file轉(zhuǎn)base64，base64轉(zhuǎn)blob，blob轉(zhuǎn)url訪

yagami 發(fā)布于2019-08-26 10:57 / 2757人閱讀

摘要：轉(zhuǎn)上傳附件轉(zhuǎn)文件流傳入一個參數(shù)對象即可得到基于該參數(shù)對象的文本內(nèi)容該屬性表示目標(biāo)對象的轉(zhuǎn)轉(zhuǎn)轉(zhuǎn)使用例子

file轉(zhuǎn)base64

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

base64轉(zhuǎn)blob

/**
 * base64轉(zhuǎn)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轉(zhuǎn)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")
    })
})

云服務(wù)器 GPU云服務(wù)器 base64轉(zhuǎn)圖像c語言 base64上傳oss base64編解碼c語言實現(xiàn) base64

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/106880.html

相關(guān)文章

blob和base64轉(zhuǎn)文件并通過ajax上傳到服務(wù)器

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

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

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

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

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

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

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

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

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

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