https://fe-interview.pangcy.cn/tags/%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0/Recent content in 文件上传 on ZiYang FrontEnd InterviewHugoen-usThu, 06 Mar 2025 13:07:39 +0800https://fe-interview.pangcy.cn/docs/network/network-36/Tue, 04 Mar 2025 09:31:00 +0000https://fe-interview.pangcy.cn/docs/network/network-36/<h2 id="文件上传协议实现方案解析">文件上传协议实现方案解析 <a href="#%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e5%8d%8f%e8%ae%ae%e5%ae%9e%e7%8e%b0%e6%96%b9%e6%a1%88%e8%a7%a3%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><hr> <h3 id="考察点分析">考察点分析 <a href="#%e8%80%83%e5%af%9f%e7%82%b9%e5%88%86%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><p><strong>核心能力维度</strong>：网络协议理解、现代API运用、性能优化思维</p> <ol> <li><strong>协议选择能力</strong>：区分<code>multipart/form-data</code>与二进制流传输的核心差异及适用场景</li> <li><strong>现代API掌握</strong>：FormData对象操作与XMLHttpRequest/Fetch API集成</li> <li><strong>交互体验优化</strong>：多文件并发处理与上传进度监控实现</li> <li><strong>性能权衡意识</strong>：大文件传输策略与网络资源消耗控制</li> </ol> <hr> <h3 id="技术解析">技术解析 <a href="#%e6%8a%80%e6%9c%af%e8%a7%a3%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><h4 id="关键知识点优先级">关键知识点优先级 <a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9%e4%bc%98%e5%85%88%e7%ba%a7" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h4><ol> <li>Content-Type规范 &gt; FormData操作 &gt; 进度监控API</li> <li>传输效率对比 &gt; 数据格式差异 &gt; 浏览器兼容性</li> </ol> <h4 id="原理剖析">原理剖析 <a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h4><p><strong>multipart/form-data</strong>：</p> <ul> <li> <p>通过boundary分隔符组织复合数据，适合表单含文件+文本混合提交</p> </li> <li> <p>HTTP头示例：</p> <div class="prism-codeblock "> <pre id="3b01d02" class="language-http "> <code>Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryABC123</code> </pre> </div> </li> <li> <p>报文结构：</p> <div class="prism-codeblock "> <pre id="e0a65fd" class="language- "> <code>--boundary Content-Disposition: form-data; name=&#34;file&#34;; filename=&#34;a.jpg&#34; Content-Type: image/jpeg [BINARY DATA] --boundary--</code> </pre> </div> </li> </ul> <p><strong>二进制流直传</strong>：</p> <ul> <li>直接发送文件Buffer，Content-Type设为文件类型（如<code>image/png</code>）</li> <li>适用于纯文件传输场景，节省分隔符带来的传输开销</li> <li>需通过<code>Blob API</code>处理二进制数据</li> </ul> <p><strong>进度监控</strong>：</p> <div class="prism-codeblock "> <pre id="f083f02" class="language-javascript "> <code>xhr.upload.onprogress = (e) =&gt; { const percent = Math.round((e.loaded / e.total) * 100) }</code> </pre> </div> <h4 id="常见误区">常见误区 <a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h4><ol> <li>误用<code>application/json</code>传输文件</li> <li>未设置<code>enctype=&quot;multipart/form-data&quot;</code>导致服务端无法解析</li> <li>进度百分比计算未处理<code>e.total=0</code>的边界情况</li> </ol> <hr> <h3 id="问题解答">问题解答 <a href="#%e9%97%ae%e9%a2%98%e8%a7%a3%e7%ad%94" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><p><strong>协议对比</strong>：</p>