multipart/form-data 传参前端

### 实现前端使用 Multipart Form Data 提交为了实现在前端通过 `multipart/form-data` 方式上传文件或者提交表单数据，可以采用HTML中的 `<form>` 标签配合 JavaScript 来完成这一操作。当涉及到文件上传时，通常会设置 `<input type="file">` 元素让用户选择本地文件。对于更复杂的场景或是希望不刷新页面的情况下发送请求，则可以通过JavaScript创建 FormData 对象来构建键值对形式的数据集，并利用 XMLHttpRequest 或 Fetch API 发送 POST 请求给服务器[^5]。 #### 使用 HTML 和原生 JavaScript 的例子： ```html <form id="uploadForm"> <label for="title">Title:</label> <input name="title" id="title"/><br/> <label for="myfile">File to upload:</label> <input type="file" name="myfile" id="myfile"/><br/> <button>Submit</button> </form> <script> document.getElementById('uploadForm').onsubmit = async function(event){ event.preventDefault(); const formData = new FormData(this); try { let response = await fetch('/your-endpoint', {method:'POST', body:formData}); if(response.ok){ console.log(await response.text()); }else{ throw Error(`HTTP error! status: ${response.status}`); } } catch (error) { console.error(error.message); } }; </script> ``` 此代码片段展示了如何捕获表单提交事件并阻止默认行为，接着收集所有输入字段的内容至一个新的 `FormData` 实例中，最后通过异步函数调用 `fetch()` 方法向指定 URL 地址发起带有这些数据的 HTTP POST 请求。另外，在某些框架环境下（如 Vue.js），也可以借助组件库提供的功能简化上述过程。例如 Element UI 组件库提供了 Upload 组件可以直接处理文件的选择与上传逻辑。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

下一篇如何用pycharm中的opencv展示一个图片