javascript实现上传文件流file转base64，base64转blob，blob转url访

yagami 发布于2019-08-26 10:57 / 2560人阅读

摘要：转上传附件转文件流传入一个参数对象即可得到基于该参数对象的文本内容该属性表示目标对象的转转转使用例子

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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请求接口...

helloworldcoding 2019-08-23 15:28 评论0 收藏0
你知道前端对图片的处理方式吗？

摘要：对于第二种存储方式，我们前端需要将其二进制流交由对象处理，然后通过的生成临时赋值给属性来显示。当后端返回特定的图片二进制流的时候，就像我第一里的情景再现说的，前端用容器接收。前言作为前端工程师 de 我们，日常少不了会跟图片打交道。在各大电商平台工作的前端工程师们，感受可能会更加的明显。以下是我之前跟图片打交道踩到的坑，跟大家分享一下经验。一、情景再现用postman请求接口...

LiuRhoRamen 2019-08-30 15:55 评论0 收藏0
你知道前端对图片的处理方式吗？

摘要：对于第二种存储方式，我们前端需要将其二进制流交由对象处理，然后通过的生成临时赋值给属性来显示。当后端返回特定的图片二进制流的时候，就像我第一里的情景再现说的，前端用容器接收。前言作为前端工程师 de 我们，日常少不了会跟图片打交道。在各大电商平台工作的前端工程师们，感受可能会更加的明显。以下是我之前跟图片打交道踩到的坑，跟大家分享一下经验。一、情景再现用postman请求接口...

Zachary 2019-08-02 14:20 评论0 收藏0