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

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

摘要：轉(zhuǎn)上傳附件轉(zhuǎn)文件流傳入一個(gè)參數(shù)對(duì)象即可得到基于該參數(shù)對(duì)象的文本內(nèi)容該屬性表示目標(biāo)對(duì)象的轉(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();
  // 傳入一個(gè)參數(shù)對(duì)象即可得到基于該參數(shù)對(duì)象的文本內(nèi)容
  reader.readAsDataURL(file);
  reader.onload = function (e) {
    // target.result 該屬性表示目標(biāo)對(duì)象的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語(yǔ)言 base64上傳oss base64編解碼c語(yǔ)言實(shí)現(xiàn) base64

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106880.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

Zachary 2019-08-02 14:20 評(píng)論0 收藏0