js中file、blob、base64格式文件如何互转？
网友回复
Base64
Base64 是一组相似的二进制到文本（binary-to-text）的编码规则，使得二进制数据在解释成 radix-64 的表现形式后能够用 ASCII 字符串的格式表示出来。Base64 这个词出自一种 MIME 数据传输编码。Blob
Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。File
File 接口提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。 通常情况下， File 对象是来自用户在一个 元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的 DataTransfer 对象，或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。在Gecko中，特权代码可以创建代表任何本地文件的File对象，而无需用户交互。 File 对象是特殊类型的 Blob，且可以用在任意的 Blob 类型的 context 中。比如说， FileReader, URL.createObjectURL(), createImageBitmap(), 及 XMLHttpRequest.send() 都能处理 Blob 和 File。Base64、Blob、File 三种类型的相互转换
1、File 转 Base64
主要应用场景：图片预览 <!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
</head>
<body>
<input type="file" name="file" id="file" multiple></br>
<button id="fileTobase">File 转 Base64</button><br>
<img id="img" src="" alt="">
<script>
// 文件类型转base64
const fileToBase64 = (file, callback) => {
const reader = new FileReader();
reader.onload = function(evt) {
if(typeof callback === 'function') {
callback(evt.target.result)
} else {
console.log("我是base64:", evt.target.result);
}
};
reader.readAsDataURL(file);
};
$("#fileTobase").click(function (e) {
e.preventDefault();
// 获取文件对象
const _file = $("#file")[0].files[0];
const base64 = fileToBase64(_file, base64 => {
console.log('我是base64:', base64);
// 预览图片
$("#img").attr({"src": base64})
});
});
</script>
</body>
</html>
2、File 转 Blob
主要应用场景：文件上传
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File 转 Blob</title>
<script src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
</head>
<body>
<input type="file" name="file" id="file"></br>
<button id="fileToBlob">File 转 Blob</button><br>
<script>
// 文件类型转Blob
const fileToBlob = (file, callback) => {
const type = file.type;
const reader = new FileReader();
reader.onload = function(evt) {
const blob = new Blob([evt.target.result], {type});
if(typeof callback === 'function') {
callback(blob)
} else {
console.log("我是 blob:", blob);
}
};
reader.readAsDataURL(file);
};
$("#fileToBlob").click(function (e) {
e.preventDefault();
// 获取文件对象
const _file = $("#file")[0].files[0];
fileToBlob(_file, blob => {
console.log('我是 blob:', blob);
});
});
</script>
</body>
</html>
3、Base64 转 File
主要应用场景：文件上传
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Base64 转 File</title> <script src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script> </head> <body> <img id="img" src="" alt="" srcset=""> <br> <input style="display: none;" type="text" name="base64" id="base64" value="data:image/jpeg;base64,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...
点击查看剩余70%
by thinkfuture
我知道答案，我要回答
私活外包
最新提问
js如何流式输出ai的回答并折叠代码块，点击代码块右侧可预览代码？
ai大模型如何将文章转换成可视化一目了然的图片流程图图表？
大模型生成html版本的ui原型图和ppt演示文档的系统提示词怎么写？
rtsp视频直播流如何转换成websocket流在h5页面上观看？
为啥coze会开源工作流agent coze studio？
如何检测网页是通过收藏夹打开的？
python如何实现类似php的http动态脚本请求处理响应代码？
js如何实现类似php的http动态脚本请求处理响应代码？
trae与solo有啥区别不同？
vue如何让ai动态生成问卷调查多步骤表单式收集基础信息自动规划执行任务？
