<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
<channel>
<title><![CDATA[刘新修]]></title> 
<link>http://liuxinxiu.com:80/index.php</link> 
<description><![CDATA[刘新修的个人博客 (Liuxinxiu'S Blog)]]></description> 
<language>zh-cn</language> 
<copyright><![CDATA[刘新修]]></copyright>
<item>
<link>http://liuxinxiu.com:80/s//</link>
<title><![CDATA[js的Blob以及和File、base64的转化]]></title> 
<author>刘新修 &lt;admin@yourname.com&gt;</author>
<category><![CDATA[H5/JS/CSS]]></category>
<pubDate>Fri, 02 Aug 2024 03:27:47 +0000</pubDate> 
<guid>http://liuxinxiu.com:80/s//</guid> 
<description>
<![CDATA[ 
	<style type="text/css">.con li &#123;list-style: none;&#125;</style><div class="con"><div><h2>Blob是什么</h2><p>在JavaScript中，Blob（二进制大对象）对象是一种用于表示原始数据的类文件对象，它存储了任意类型的数据，通常是二进制数据，但也可以包含文本数据或其他格式的数据。Blob对象通常用于在客户端浏览器中处理二进制数据，比如文件上传、数据传输等场景。（Blob对象可以将任意类型的数据转换为二进制形式进行存储和处理。这使得Blob对象成为处理各种数据类型的有效工具，包括文本、图像、音频、视频等。在JavaScript中，Blob对象提供了一种统一的接口来处理这些数据，无论是从用户上传的文件中获取数据，还是从其他来源获取数据，都可以使用Blob对象来进行二进制处理。）</p><h2>Blob的用途</h2><p>Blob对象常见的使用情况包括：</p><ul><li><p>文件上传：当用户通过网页上传文件时，浏览器会创建一个Blob对象来表示上传的文件数据，然后可以将该Blob对象发送到服务器端进行处理。</p></li><li><p>数据传输：在客户端与服务器端进行数据交互时，可以使用Blob对象来存储和传输二进制数据，例如通过XMLHttpRequest或Fetch API发送Blob对象。</p></li><li><p>图像处理：在客户端对图像进行处理时，可以将图像数据存储在Blob对象中，并通过Canvas API等技术进行操作和显示。</p></li><li><p>媒体处理：在处理音频或视频等媒体数据时，可以使用Blob对象来存储和处理媒体数据。</p></li></ul><h2>和file文件流的关系</h2><p>以下是Blob对象和File对象之间的联系和区别：</p><ul><li><p><strong>Blob对象：</strong><br />Blob对象是二进制数据的容器，可以包含任意类型的数据，如文本、图像、音频或视频等。<br />可以通过构造函数 <code>new Blob(data, options)</code> 创建 Blob 对象，其中 <code>data</code> 是包含数据的数组或数组缓冲区，<code>options</code> 是一个可选对象，用于指定 Blob 的 MIME 类型和结束符等信息。</p></li><li><p><strong>File对象：</strong><br />File对象是Blob对象的一种扩展，通常用于表示用户系统中的文件，具有文件名和最后修改日期等属性。<br />可以通过 <code>new File(data, name, options)</code> 构造函数创建 File 对象，其中 <code>data</code> 是包含数据的数组或数组缓冲区，<code>name</code> 是文件名，<code>options</code> 是一个可选对象，用于指定文件的 MIME 类型和最后修改日期等信息。</p></li></ul><p><strong>联系与区别：</strong><br />File对象是Blob对象的子类，因此所有可以对Blob对象执行的操作也同样适用于File对象。<br />File对象在表示文件时具有额外的元数据，如文件名和最后修改日期等。<br />在实际使用中，Blob对象通常用于处理二进制数据，而File对象则用于处理用户系统中的文件，如文件上传和操作。</p><p>因此，可以说File对象是Blob对象的一种特殊情况，用于在JavaScript中表示用户系统中的文件，并提供了额外的文件相关的属性。</p><h2>Blob和File文件流，base64的转化</h2><p><strong>Blob对象转文件：</strong> 可以使用<code>File</code>构造函数将Blob对象转换为文件对象。<code>File</code>构造函数接受一个Blob对象和一个文件名作为参数，然后返回一个文件对象。</p></div><div class="codeText"><div class="codeHead">JavaScript代码</div><ol start="1" class="dp-c"><li class="alt"><span><span class="keyword">var</span><span> blob = </span><span class="keyword">new</span><span> Blob([</span><span class="string">&quot;blob data&quot;</span><span>], &#123; type: </span><span class="string">&quot;text/plain&quot;</span><span> &#125;);&nbsp;&nbsp;</span></span></li><li><span><span class="keyword">var</span><span> file = </span><span class="keyword">new</span><span> File([blob], </span><span class="string">&quot;filename.txt&quot;</span><span>);&nbsp;&nbsp;</span></span></li></ol></div><p><span style="box-sizing: border-box; font-weight: 600; color: rgb(64, 64, 64); font-family: -apple-system, BlinkMacSystemFont, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 16px;">Blob对象转Base64：</span><span style="color: rgb(64, 64, 64); font-family: -apple-system, BlinkMacSystemFont, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 16px;"> 可以使用</span><code style="box-sizing: border-box; font-size: 12px; font-family: Consolas, Monaco, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, monospace; padding: 2px 4px; border: none; vertical-align: middle; white-space-collapse: preserve; color: rgb(199, 37, 78); background-color: rgb(242, 242, 242);">FileReader</code><span style="color: rgb(64, 64, 64); font-family: -apple-system, BlinkMacSystemFont, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 16px;">对象将Blob对象转换为Base64编码的字符串。</span><code style="box-sizing: border-box; font-size: 12px; font-family: Consolas, Monaco, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, monospace; padding: 2px 4px; border: none; vertical-align: middle; white-space-collapse: preserve; color: rgb(199, 37, 78); background-color: rgb(242, 242, 242);">FileReader</code><span style="color: rgb(64, 64, 64); font-family: -apple-system, BlinkMacSystemFont, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 16px;">对象可以读取Blob对象中的数据，并以指定的编码格式输出。</span></p><div class="codeText"><div class="codeHead">JavaScript代码</div><ol start="1" class="dp-c"><li class="alt"><span><span class="keyword">var</span><span> blob = </span><span class="keyword">new</span><span> Blob([</span><span class="string">&quot;blob data&quot;</span><span>], &#123; type: </span><span class="string">&quot;text/plain&quot;</span><span> &#125;);&nbsp;&nbsp;</span></span></li><li><span><span class="keyword">var</span><span> reader = </span><span class="keyword">new</span><span> FileReader();&nbsp;&nbsp;</span></span></li><li class="alt"><span>reader.readAsDataURL(blob);&nbsp;&nbsp;</span></li><li><span>reader.onload = <span class="keyword">function</span><span> () &#123;&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;<span class="keyword">var</span><span> base64String = reader.result;&nbsp;&nbsp;</span></span></li><li><span>&#125;;&nbsp;&nbsp;</span></li></ol></div><p><span style="box-sizing: border-box; font-weight: 600; color: rgb(64, 64, 64); font-family: -apple-system, BlinkMacSystemFont, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 16px;">Base64转Blob对象：</span><span style="color: rgb(64, 64, 64); font-family: -apple-system, BlinkMacSystemFont, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 16px;"> 可以将Base64编码的字符串转换回Blob对象。这可以通过创建一个新的Blob对象并指定Base64字符串的数据类型完成。</span></p><div class="codeText"><div class="codeHead">JavaScript代码</div><ol start="1" class="dp-c"><li class="alt"><span><span class="keyword">var</span><span> base64String = </span><span class="string">&quot;base64 data&quot;</span><span>;&nbsp;&nbsp;</span></span></li><li><span><span class="keyword">var</span><span> byteCharacters = atob(base64String);&nbsp;&nbsp;</span></span></li><li class="alt"><span><span class="keyword">var</span><span> byteNumbers = </span><span class="keyword">new</span><span> Array(byteCharacters.length);&nbsp;&nbsp;</span></span></li><li><span><span class="keyword">for</span><span> (</span><span class="keyword">var</span><span> i = 0; i &lt; byteCharacters.length; i++) &#123;&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;byteNumbers[i] = byteCharacters.charCodeAt(i);&nbsp;&nbsp;</span></li><li><span>&#125;&nbsp;&nbsp;</span></li><li class="alt"><span><span class="keyword">var</span><span> byteArray = </span><span class="keyword">new</span><span> Uint8Array(byteNumbers);&nbsp;&nbsp;</span></span></li><li><span><span class="keyword">var</span><span> blob = </span><span class="keyword">new</span><span> Blob([byteArray], &#123; type: </span><span class="string">&quot;image/jpeg&quot;</span><span> &#125;);&nbsp;&nbsp;</span></span></li></ol></div></div>
]]>
</description>
</item><item>
<link>http://liuxinxiu.com:80/s//#blogcomment</link>
<title><![CDATA[[评论] js的Blob以及和File、base64的转化]]></title> 
<author> &lt;user@domain.com&gt;</author>
<category><![CDATA[评论]]></category>
<pubDate>Thu, 01 Jan 1970 00:00:00 +0000</pubDate> 
<guid>http://liuxinxiu.com:80/s//#blogcomment</guid> 
<description>
<![CDATA[ 
	
]]>
</description>
</item>
</channel>
</rss>