js图片上传中file、bolb、base64图片之间的相互转化

为了详细讲解“js图片上传中file、bolb、base64图片之间的相互转化”的完整攻略,我们需要分别了解它们都代表着什么,以及相互之间的转换方式:

  1. File类型

File类型表示一个文件,通常是从用户计算机中选定的文件。File对象通常与input元素一起使用,而用于上传文件。File对象包含了文件的名称、文件大小、类型以及最后修改的时间等信息。

将File类型转化为Blob类型,可以尝试使用File中的slice方法,将一个文件切分为一片,可以通过不同的参数对数据进行切片。示例代码如下:

let file = document.getElementById("fileInput").files[0];
let start = 0;
let end = file.size;
let blob = file.slice(start, end);
  1. Blob类型

Blob对象代表不可变的类似文件对象的原始数据。Blob表示二进制数据块,Blob提供了一种通用的文件对象,支持 Blob和 File 类型数据的读取、转换和操作。Blob对象可以是任意类型的数据,比如图片、音频、视频或文本等。可以将Blob类型转化为Base64类型,示例代码如下:

let myBlob = new Blob(["test blob"], {type : "text/plain"});
let reader = new FileReader();
reader.readAsDataURL(myBlob); 
reader.onloadend = function() {
    console.log(reader.result);
};
  1. Base64类型

Base64类型编码是一种用64种字符来表示二进制数据的编码方法。Base64类型字符串是用6位来计算的,所以每三个字节都会对应出现四个数字的Base64编码, 是一种表示二进制数据的方案。将Base64类型转化为Blob类型,可尝试使用atob方法将Base64类型字符串解码成二进制数据,然后创建Blob对象,示例代码如下:

let base64Data = "data:image/jpeg;base64,/9j/4AAQSkZJRgA...";
let byteCharacters = atob(base64Data.split(',')[1]);
let byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
}
let byteArray = new Uint8Array(byteNumbers);
let blob = new Blob([byteArray]);

以上是针对js中图片上传的三种数据类型,File、Blob、Base64之间的互相转化攻略,其中每个类型的实现方法也有更多的细节,可以根据实际情况进行选择和改写。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js图片上传中file、bolb、base64图片之间的相互转化 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • 高效率JavaScript编写技巧整理

    高效率JavaScript编写技巧整理 引言 JavaScript 往往是前端工程师最耗费时间的语言之一,因为它不仅需要考虑代码的逻辑,还需要兼顾用户体验,包括运行时间、渲染时间、页面交互等因素。在这里,我们将为大家整理一些高效率 JavaScript 编写技巧,帮您更好地提高编程效率。 1. 常量和变量的命名 程序的可读性取决于变量和函数的命名,因此需要修…

    JavaScript 2023年5月18日
    00
  • Jsoup解析HTML实例及文档方法详解

    Jsoup是什么? Jsoup是一个Java的HTML解析器,可用于从网页中提取和处理数据。 Jsoup常用的文档方法 ① connect方法:建立到指定URL的连接,并返回一个Connection对象 例如: Connection connection = Jsoup.connect("https://www.example.com")…

    JavaScript 2023年6月11日
    00
  • js中的鼠标事件有哪些(用法示例学习进阶)

    JS中的鼠标事件是指在浏览器中用户和鼠标交互时,所触发的事件。在前端开发中,这些鼠标事件被广泛应用于各种网站和应用程序中。下面将介绍一些常用的鼠标事件以及它们的用法示例。 鼠标单击事件(click) 鼠标单击事件(click)是指在鼠标左键单击时所触发的事件。在页面中使用最为广泛的是按钮的单击事件。下面是一个示例,当按钮被单击时,将弹出一个提示框。 <…

    JavaScript 2023年6月11日
    00
  • 收藏Javascript中常用的55个经典技巧

    收藏Javascript中常用的55个经典技巧 介绍 本文收集了Javascript中常用的55个经典技巧,每个技巧都包含简短的代码示例和详细的解释。这些技巧旨在帮助Javascript开发者提高他们的编程技能。 主要内容 以下是本文中包含的55个Javascript技巧: 数组去重 javascriptconst arr = [1, 2, 3, 3, 4,…

    JavaScript 2023年5月18日
    00
  • javascript匿名函数实例分析

    JavaScript匿名函数实例分析 在JavaScript中,函数作为一等公民,被广泛应用于各种场景。函数有两种定义方式:命名函数和匿名函数。本文将详细讲解JavaScript匿名函数的实例分析。 什么是匿名函数? 匿名函数是指没有名称的函数,通常使用匿名函数来进行一些临时的操作。其定义方式如下: (function() { // code here })…

    JavaScript 2023年6月10日
    00
  • event.srcElement 用法笔记e.target

    event.srcElement 和 e.target 都是指向事件触发的DOM元素的属性。在不同的浏览器中,其名称和行为可能略有不同,但作用是一样的。 在现代浏览器中,我们应该用 e.target 代替 event.srcElement。下面是两个例子,演示了如何使用这两个属性: 使用 event.srcElement document.addEventL…

    JavaScript 2023年6月10日
    00
  • JavaScript实例–创建一个欢迎cookie

    接下来我将为您详细讲解如何创建一个欢迎cookie的完整攻略。 1. 前言 在开始之前,我们需要明确一些概念: 1.1 cookie是什么? Cookie(中文:HTTP cookie)是指网站为了辨别用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。 1.2 Javascript中的document.cookie是什么? do…

    JavaScript 2023年6月11日
    00
  • 简短几句 通俗解释javascript的闭包

    下面是详细讲解JavaScript闭包的完整攻略: 什么是闭包? 闭包(closure)是指函数能够访问并使用其自身定义范围之外的变量。 JavaScript 中的每个函数都是一种闭包,将函数作为参数或从函数中返回函数时常会用到闭包的知识。 闭包示例1 例如,下面的代码定义了一个 name 变量,并在函数中创建了一个内部函数,返回的函数能够访问并使用 nam…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部