05-头像上传
<p><strong>简要描述：</strong> </p>
<ul>
<li>测试FormData上传文件</li>
</ul>
<p><strong>请求URL：</strong> </p>
<ul>
<li><code>/api/file</code></li>
</ul>
<p><strong>请求方式：</strong></p>
<ul>
<li>POST </li>
</ul>
<p><strong>请求体（FormData格式）：</strong> </p>
<table>
<thead>
<tr>
<th style="text-align: left;">参数名</th>
<th style="text-align: left;">必选</th>
<th style="text-align: left;">类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">avatar</td>
<td style="text-align: left;">是</td>
<td style="text-align: left;">file文件</td>
<td>用户通过 <code><input type="file" /></code> 文件选择框，选择的头像</td>
</tr>
</tbody>
</table>
<p><strong>返回示例：</strong></p>
<pre><code>{
message: '上传文件成功！',
data: {
url: '/uploads/1578624038450_09504b648c2f471f847bc22052eab7e3.jpg'
}
}</code></pre>
<p><strong>返回参数说明：</strong> </p>
<table>
<thead>
<tr>
<th style="text-align: left;">参数名</th>
<th style="text-align: left;">类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">message</td>
<td style="text-align: left;">string</td>
<td>服务器返回的描述消息</td>
</tr>
<tr>
<td style="text-align: left;">data</td>
<td style="text-align: left;">object</td>
<td>数据对象</td>
</tr>
<tr>
<td style="text-align: left;">+ url</td>
<td style="text-align: left;">string</td>
<td>图片在服务器的存放路径</td>
</tr>
</tbody>
</table>
<p><strong>备注：</strong> </p>
<p>在使用 <code><input type="file" /></code> 文件选择框选择图片文件时，最好指定 <code>accept</code> 属性，来控制用户只能选择图片文件，示例代码如下：</p>
<pre><code class="language-html"><!-- 文件选择框 -->
<!-- 通过 accept 属性来控制选择的文件类型 -->
<input type="file" id="file1" accept="image/jpeg,image/png,image/bmp,image/gif" /></code></pre>