### 使用 `FormData` 处理二进制文件 为了在前端使用 `FormData` 来处理并上传二进制文件，可以按照如下方式构建请求： 创建一个新的 `FormData` 实例用于存储要发送的数据。对于文件类型的字段，可以直接通过 `.append()` 方法添加文件对象。 ```javascript function prepareUpload(file, additionalData) { const formData = new FormData(); // 添加文件到表单数据中 formData.append('file', file); // 如果有其他附加信息，则也一并通过 append 方法加入 Object.keys(additionalData).forEach(key => { formData.append(key, additionalData[key]); }); return formData; } ``` 之后可以通过 AJAX 或者 Fetch API 发送此 `FormData` 到服务器端[^1]。 #### 示例：利用 fetch 进行上传操作 下面是一个完整的例子展示如何结合 HTML 文件输入控件以及 JavaScript 的 `fetch` 函数实现文件上传功能: ```html <input type="file" id="uploadInput"/> <button onclick="handleClick()">点击上传</button> <script> async function handleClick() { const inputElement = document.getElementById('uploadInput'); const selectedFile = inputElement.files[0]; if (!selectedFile) return; const extraInfo = { time: '20220730' }; const formData = prepareUpload(selectedFile, extraInfo); try { await fetch('/api/upload', { method: 'POST', body: formData, }); console.log("成功上传"); } catch (error) { console.error("上传失败:", error.message); } } </script> ``` 上述代码片段展示了如何获取用户选择的文件，并将其连同一些额外的信息一起打包成 `FormData` 对象，最后再用 `fetch` 将其提交给指定的服务端地址[^2]。 另外，在某些情况下可能还需要传递 JSON 字符串形式的对象作为参数之一；这时应先序列化该对象为字符串后再追加至 `FormData` 中[^3]。