使用 JS fetch API 掌握文件上传
使用 JS fetch API 可能会令人畏惧，尤其是在处理文件上传时。让我们通过逐步分解来简化此过程。
1.捕获文件输入
如代码中所示，使用文件输入元素允许用户选择文件：
<form>
<div>
<label>Select file to upload</label>
<input type="file">
</div>
<button type="submit">Convert</button>
</form>2.处理提交事件
捕获提交事件（将占位符替换为您首选的事件处理程序）：
document.querySelector('form').addEventListener('submit', (event) => {
// Prevent default form submission
event.preventDefault();
// Retrieve the selected file
const input = event.target.querySelector('input[type="file"]');
// Construct the request body
const formData = new FormData();
formData.append('file', input.files[0]);
// Submit the request
fetch('/files', {
method: 'POST',
body: formData
}).then(/* perform necessary actions */);
});3.构造请求正文
要使用 fetch 发送文件，请使用 FormData API。它创建一个多部分/表单数据请求正文。将所选文件 (input.files[0]) 和任何其他数据（例如用户信息）附加到 formData 对象：
const formData = new FormData();
formData.append('file', input.files[0]);
formData.append('user', 'username');4.发起 fetch 请求
准备好请求正文后，使用 fetch 发送 POST 请求，指定端点 URL（'/files'）并提供 formData 对象作为正文：
fetch('/files', {
method: 'POST',
body: formData
})
.then(/* handle the response as desired */);瞧！您现在拥有使用 JS fetch API 的功能齐全的文件上传机制。
以上是如何使用 JavaScript Fetch API 掌握文件上传？的详细内容。更多信息请关注PHP中文网其他相关文章！
