formData存的是什么

`FormData` 是一种专门用于构建表单数据的对象，它允许我们以键值对的形式存储数据，并且可以轻松地将文件和文本数据一起发送到服务器。`FormData` 通常与 AJAX 请求结合使用，特别是在需要上传文件时。以下是一个详细的解决方案，展示 `FormData` 的使用方式。 --- ### 使用 `FormData` 的示例假设我们需要实现一个功能：用户可以选择一个文件并输入一些描述信息，然后通过 POST 请求将这些数据发送到服务器。 #### 前端代码（HTML + JavaScript） ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>FormData 示例</title> </head> <body> <form id="uploadForm"> <label for="fileInput">选择文件:</label> <input type="file" id="fileInput" name="file" required><br><br> <label for="description">描述信息:</label> <textarea id="description" name="description" required></textarea><br><br> <button type="button" onclick="submitForm()">提交</button> </form> <script> function submitForm() { // 创建 FormData 对象 const formData = new FormData(); // 获取文件和描述信息 const file = document.getElementById('fileInput').files[0]; const description = document.getElementById('description').value; // 将数据添加到 FormData 中 formData.append('file', file); // 添加文件 formData.append('description', description); // 添加描述信息 // 发送 POST 请求 fetch('/upload', { method: 'POST', body: formData // 使用 FormData 作为请求体 }) .then(response => response.json()) .then(data => { console.log('成功:', data); alert('文件上传成功！'); }) .catch(error => { console.error('错误:', error); alert('文件上传失败，请稍后再试！'); }); } </script> </body> </html> ``` --- ### 后端代码（Python Flask 示例）以下是一个简单的 Flask 后端，用于接收前端发送的 `FormData` 数据。 ```python from flask import Flask, request, jsonify app = Flask(__name__) @app.route('/upload', methods=['POST']) def upload_file(): # 获取文件 file = request.files['file'] if not file: return jsonify({'error': '未找到文件'}), 400 # 获取描述信息 description = request.form.get('description') if not description: return jsonify({'error': '未找到描述信息'}), 400 # 保存文件到本地 try: file.save(f"./uploads/{file.filename}") return jsonify({ 'message': '文件上传成功', 'filename': file.filename, 'description': description }), 200 except Exception as e: return jsonify({'error': str(e)}), 500 if __name__ == '__main__': app.run(debug=True) ``` --- ### 解释 1. **前端部分**： - 我们创建了一个表单，包含一个文件输入框和一个文本区域。 - 使用 `new FormData()` 创建一个 `FormData` 对象。 - 使用 `formData.append(key, value)` 方法将文件和描述信息添加到 `FormData` 中。 - 使用 `fetch` API 发送 POST 请求，将 `FormData` 作为请求体发送到后端。 2. **后端部分**： - 使用 Flask 的 `request.files` 获取上传的文件。 - 使用 `request.form` 获取表单中的其他字段（如描述信息）。 - 将文件保存到本地，并返回响应。 --- ###

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

下一篇使用jupyter完成

目录

formData存的是什么

Python内容推荐

融合PCC降维-LSTM-XGBoost的光伏功率预测研究（Python代码实现）

论文复现风光制氢合成氨系统优化研究（Python代码实现）

FormData：FormData支持其中window.FormData未定义

使用axios请求时,发送formData请求的示例

使用FormData实现上传多个文件

Vue formData实现图片上传

vue使用axios上传文件(FormData)的方法

JS FormData对象使用方法实例详解

axios post提交formdata的实例

JS FormData上传文件的设置方法

JS中使用FormData上传文件、图片的方法

js与php利用FormData相互传值

ajax使用formdata上传文件流

wx-formdata:在小程序中使用formdata上传数据，可实现多文件上传

axios 实现post请求时把对象obj数据转为formdata

JS中FormData类实现文件上传

Vue 使用formData方式向后台发送数据的实现

js使用formData实现批量上传

通过Ajax方式上传文件使用FormData进行Ajax请求

JavaScript将base64图片转换成formData并通过AJAX提交的实现方法

Python部署手记：django, gunicorn, virtualenv, circus, nginx

浅谈Django+Gunicorn+Nginx部署之路

django_and_postgresl:使用Postgres，Gunicorn和Nginx对Django进行Docker化

django-on-docker:Django + Postgresql + Gunicorn + LetsEncrypt + Nginx

django项目部署 nginx+gunicorn+virtualenv+mysql

学生成绩管理系统C++课程设计与实践

别再手动拖拽了！用Lumerical脚本批量创建FDTD仿真结构（附完整代码）

Java邮件解析任务中，如何安全高效地提取HTML邮件内容并避免硬编码、资源泄漏和类型转换异常？

RH公司应收账款管理优化策略研究

新手别慌！用BingPi-M2开发板带你5分钟搞懂Tina Linux SDK目录结构