文件上传---FormData格式的传参

前端在实现文件上传功能时常常使用FormData,用于构造键值对数据。可以通过append方法添加数值或文件。对于复杂情况,如需上传文件和元数据,可以结合Blob将数据转换为特定格式。此外,FormData还支持删除、检查和获取所有键值对。Blob则常用于处理二进制数据,如分片上传、图片压缩等。

一般前端做  文件导入功能 / 上传功能 的时候会用到Formdata的格式,来上传文件和数据

会比较常用的两种方式:

let formData = new FormData(); // 当前为空

1. 直接表单传值

可以使用FormData.append来添加键/值对到表单里面;

//传数值
formData.append('name', id);
//传文件
formData.append('files', file);

2. 后端的多部分传参

和后端接口保持统一,那么可能不全是表单格式的数据, 可能设置的不同的格式,比如文件格式的文件和数据格式的数值,因此需要带格式传过去(new Blob方法)。

//传文件
formData.append('file-data', file);
//传数据(元数据格式)
formData.append('meta-data',new Blob([JSON.stringify(data)], { type: 'application/json' }) )


方法拓展:

1. FormData  对象将数据编译成键值对,以便用XMLHttpRequest来发送数据。其主要用于发送表单数据,但亦可用于发送带键数据key/value,而独立于表单使用。如果表单enctype属性设为 multipart/form-data,则会使用表单的submit()方法来发送数据,从而发送数据具有同样形式。

  FormData.append(key,value)加数据,如果指定的key不存在则会新增一条数据,如果key存在,则追加到数据末尾.

  FormData.append(key)  从对象中删除指定键,即 key,和它对应的值,即 value

  FormData.has(key) 返回一个布尔值,表示该FormData对象是否含有某个key

  FormData.getAll(key)方法会返回该 FormData 对象指定 key 的所有值。

2. Blob  表示二进制类型的大对象。在数据库管理系统中,将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在 JavaScript 中 Blob 类型的对象表示不可变的类似文件对象的原始数据。

  Blob 使用场景: 分片上传,从互联网下载数据,Blob 用作 URL,Blob 转换为 Base64,图片压缩,生成 PDF 文档

<think>嗯,用户想了解如何在HTTP请求中使用form-data格式传参。首先,我需要回忆一下form-data的相关知识。记得form-data主要用于文件上传,也支持普通字段。根据引用内容,比如引用1提到form-data一般用于文件上传,调用接口时参数data设置为FormData对象,但直接打印可能显示为空,需要用get方法查看数据。引用3和4则展示了在Axios和Python中使用FormData的具体代码示例。 首先,我应该解释form-data的基本概念和适用场景,比如文件上传时需要用到。然后,分步骤说明不同编程语言中的实现方法,比如JavaScript的Fetch API和Axios,以及Python的requests库。要确保每个示例都符合用户提供的引用内容,比如在JavaScript中创建FormData对象并使用append方法添加字段,设置Content-Type为multipart/form-data,但注意浏览器会自动处理,所以可能不需要手动设置。而在Python中,需要使用MultipartEncoder,并显式设置Content-Type头部。 还要注意用户可能遇到的常见问题,比如为什么FormData对象打印出来显示为空,这时候需要引用1中的说明,指出需要使用get方法来检查数据。另外,需要强调在发送请求时正确设置Content-Type的重要性,如引用4中提到必须设置Content-Type为encoder.content_type。同时,提醒用户不同后端框架处理form-data的方式可能不同,比如Node.js的multer中间件或Python的Flask框架。 最后,按照用户的要求生成相关问题,这些问题应该覆盖form-data的应用场景、与其他格式的区别、处理不同字段类型的方法以及后端解析方式等方面。确保问题有针对性,能帮助用户深入理解相关知识点。</think>### 如何在HTTP请求中使用form-data格式传参? #### 一、form-data格式简介 `form-data`是HTTP请求中用于传输复杂数据(如文件+文本混合数据)的编码格式,常用于文件上传场景。其特点是通过`boundary`分割不同字段,支持二进制数据[^1][^2]。 --- #### 二、具体实现步骤 ##### 1. **JavaScript(浏览器环境)** - **创建FormData对象** ```javascript const formData = new FormData(); formData.append('text_field', 'value'); // 文本参数 formData.append('file_field', fileInput.files[0]); // 文件参数 ``` > 注意:`FormData`对象通过`append()`方法添加字段,打印时显示为空是正常现象,需通过`formData.get('field_name')`验证数据[^1]。 - **发送请求** ```javascript // 使用Fetch API fetch('https://api.example.com/upload', { method: 'POST', body: formData, // 自动设置Content-Type为multipart/form-data headers: { // 无需手动设置Content-Type,浏览器会自动添加boundary } }); ``` ##### 2. **Python(requests库)** - **安装依赖** ```bash pip install requests requests-toolbelt ``` - **构建Multipart请求** ```python import requests from requests_toolbelt import MultipartEncoder # 创建MultipartEncoder对象 m = MultipartEncoder( fields={ 'text_field': 'value', # 文本参数 'file_field': ('filename.jpg', open('file.jpg', 'rb'), 'image/jpeg') # 文件参数 } ) # 发送请求 response = requests.post( 'https://api.example.com/upload', data=m, headers={'Content-Type': m.content_type} # 必须显式设置Content-Type[^4] ) ``` ##### 3. **其他语言框架** - **Node.js(Axios)** ```javascript const axios = require('axios'); const FormData = require('form-data'); const form = new FormData(); form.append('cityId', '123'); // 文本参数 form.append('file', fs.createReadStream('file.pdf')); axios.post('https://api.example.com/upload', form, { headers: form.getHeaders() // 获取完整的Content-Type }); ``` --- #### 三、注意事项 1. **Content-Type设置** 浏览器环境无需手动设置`Content-Type`,但Python等后端语言需显式指定`multipart/form-data`并包含`boundary`[^4]。 2. **混合参数类型** form-data支持同时传递文本、文件、JSON等类型数据,例如: ```javascript formData.append('metadata', JSON.stringify({type: 'image'})); // JSON参数 ``` 3. **后端解析方式** 不同框架解析form-data的方式不同: - Node.js:使用`multer`中间件 - Python Flask:通过`request.files`获取文件,`request.form`获取文本[^3] ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值