formdata上传文件给后端

### 使用FormData API实现前端向后端上传文件 #### 创建HTML表单结构 为了方便用户选择并上传文件，在页面上创建一个简单的文件输入控件。 ```html <form id="upload-form"> <input type="file" name="file" /> <button type="submit">上传</button> </form> ``` #### JavaScript处理文件上传逻辑 当提交按钮被点击时，阻止默认行为，并构建`FormData`对象来封装待传输的数据。随后利用`fetch`或`axios`发起POST请求至服务器接口地址。 ```javascript document.getElementById('upload-form').addEventListener('submit', function(event){ event.preventDefault(); let formElement = document.querySelector('#upload-form'); let formData = new FormData(formElement); fetch('/api/upload', { method: 'POST', body: formData, }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); }); ``` 上述代码片段展示了如何捕获用户的文件选择动作并将这些信息打包成适合HTTP POST请求的形式[^1]。 对于更复杂的场景比如需要自定义参数或者验证，则可以在构造`FormData`实例之后手动添加键值对： ```javascript const customData = { userId: 123, description: "This is a test file." }; for (let key in customData) { formData.append(key, customData[key]); } ``` 此方法允许开发者灵活地附加额外的信息到同一个请求中去[^2]。 如果采用的是React框架下的组件形式，可以参照如下Ant Design库中的例子进行集成： ```jsx import React from 'react'; // 导入其他必要的模块... function FileUploader() { const beforeUploadHandle = (file) => { const formData = new FormData(); formData.append('file', file); axios.post('/api/services/app/AppUpdateTaskService/UpdateAppUpdateTasksFile', formData, { headers: {'Content-Type': 'multipart/form-data'} }).then((response)=>{ console.log("Success", response.data); }).catch((error)=>console.error("Failed", error)); return false; }; return ( <> <ProForm.Item> <Upload action='' multiple={false} beforeUpload={beforeUploadHandle}> <Button>上传文件</Button> </Upload> </ProForm.Item> </> ); } export default FileUploader; ``` 这段代码实现了与后台交互的功能，同时提供了良好的用户体验界面。