base64字符串、Url、File 之间的相互转换方法

大家好，欢迎来到IT知识分享网。

一、base64字符串、Url 是什么?

1、base64字符串

        Base64是一种将二进制数据转换为文本数据的编码方式。Base64编码将二进制数据每6位一组进行编码，每组编码后得到一个字符，最终将所有编码后的字符拼接起来形成一个字符串。Base64编码后的字符串中只包含文本字符，可以安全地传输和存储。Base64适用于网络传输需要传输二进制数据的场景。

2、Url

        URL 是一种用于标识和定位互联网上资源的字符串。它由多个部分组成，包括协议、主机名、端口号、路径、查询参数等。URL通常用于访问网页、图片、视频、文件等资源。

        常见的 url 类型 和 区别

二、base64 字符串和 Url 之间的相互转化方法

1、应用场景

        图片展示和下载：在Web开发中，可以将图片的Base64字符串转换为Blob URL，然后在网页中以图像形式展示出来，或者提供下载链接供用户下载图片。

        数据URI方案的使用：在某些情况下，可以将Base64字符串直接嵌入到数据URI（Data URI）中，以在HTML或CSS中引用。这种方式适用于小型图像或特定的应用场景。

        文件上传和下载：在Web应用程序中，可以将文件的Base64字符串转换为Blob URL，并通过文件上传组件将文件上传到服务器。反过来，也可以将服务器返回的文件的Blob URL转换为Base64字符串，以便在客户端进行处理或展示。

        数据传输和存储：在某些情况下，可能需要在文本格式中传输二进制数据，如将图片或其他二进制文件嵌入到JSON数据中进行传输。在这种情况下，可以将二进制数据编码为Base64字符串，并将其作为URL的一部分传输。接收方可以将Base64字符串转换回二进制数据进行处理或存储。

        图片压缩和处理：在某些情况下，可能希望对图片进行压缩、裁剪或其他处理操作，并将其保存为新的图片文件。可以使用Base64字符串作为中间表示形式，对图片进行处理后，再将其转换为Blob URL或Base64字符串进行保存或展示。

2、 base64 字符串转化成 data url

/ * 将Base64字符串转换为data URL * @param {string} base64String - Base64字符串 * @param {string} fileType - 文件类型 * @return {string} data URL */ base64ToURL(base64String, fileType) { // fileType 是你要处理的文件类型，比如 'application/pdf'、'image/png' 等 // 直接将 Base64 字符串嵌入到 URL 中 const url = `data:${fileType};base64,${base64String}`; return url; }

3、 base64 字符串转化成 blob url

/ * 将Base64字符串转换为Blob URL * @param {string} base64String - Base64字符串 * @param {string} fileType - 文件类型 * @return {string} Blob URL */ const base64ToUrl = (base64String, fileType) => { // 将Base64字符串解码为二进制数据 const byteCharacters = atob(base64String); const byteArrays = []; // 将二进制数据分割成块，并将每个块转换为Uint8Array类型的字节数组 for (let offset = 0; offset < byteCharacters.length; offset += 512) { const slice = byteCharacters.slice(offset, offset + 512); const byteNumbers = new Array(slice.length); for (let i = 0; i < slice.length; i++) { byteNumbers[i] = slice.charCodeAt(i); } const byteArray = new Uint8Array(byteNumbers); byteArrays.push(byteArray); } // 创建Blob对象 const blob = new Blob(byteArrays, { type: fileType }); // 创建Blob URL const url = URL.createObjectURL(blob); return url; };

4、 url 转化成 base64 字符串

/ * 将给定的 URL 转换为 Base64 字符串 * @param {string} url 要转换的 URL * @returns {Promise<string>} 转换后的 Base64 字符串 */ function urlToBase64(url) { return new Promise((resolve, reject) => { // 创建一个 XMLHttpRequest 对象 const xhr = new XMLHttpRequest(); xhr.open('GET', url); // 设置响应类型为 blob，以获取图像数据 xhr.responseType = 'blob'; // 请求成功时的处理函数 xhr.onload = () => { // 创建一个 FileReader 对象，用于读取 blob 数据 const reader = new FileReader(); // 读取完成时的处理函数 reader.onloadend = () => { // 将读取到的数据（Base64 字符串）传递给 resolve 函数 resolve(reader.result); }; // 读取失败时的处理函数 reader.onerror = reject; // 将 blob 数据读取为 Base64 字符串 reader.readAsDataURL(xhr.response); }; // 请求失败时的处理函数 xhr.onerror = reject; // 发送请求 xhr.send(); }); }

5、url 转化成 file

/ * 从指定 URL 获取文件内容并转化为 File 对象 * @param {string} url - 文件的 URL 地址 * @param {string} fileName - 文件名 * @param {string} fileType - 文件类型 * @returns {Promise<File|null>} - 返回一个 File 对象或者 null */ async function urlToFile(url, fileName, fileType) { try { // 从 URL 获取文件内容并转化为 Blob 对象 const response = await fetch(url); if (!response.ok) { throw new Error('Network response was not ok'); } const blob = await response.blob(); // 创建一个新的 File 对象 const file = new File([blob], fileName, { type: fileType }); return file; } catch (error) { console.error('Error:', error); return null; } }

6、fiie 转化成 url

/ * 将flie转换为Blob URL * @param {string} file文件 * @return {string} Url */ const fileToURl = (file) => { return URL.createObjectURL(file) }

7、file 转化成 base64

/ * 将flie转换为Blob URL * @param {string} file文件 * @return {string} base64 */ const fileToBase64 = (file) => { return new Promise((resovle, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => { resovle(reader.result) }; reader.onerror = function (error) { reject(error) }; }) }