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之间的互相转化攻略，其中每个类型的实现方法也有更多的细节，可以根据实际情况进行选择和改写。