http-post-upload 格式

本文介绍HTTP协议中如何通过boundary参数实现文件及字段的上传。详细解释了文本字段和文件上传的具体格式,并展示了如何使用Apache Commons FileUpload组件进行解析。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目的:发起一个携带文件和字段的http请求,理解http 通过 boundary分割域 实现文件上传功能

 

浏览器:

 

 

客户端发送的请求:

https://i-blog.csdnimg.cn/blog_migrate/e049a86a4098226ec2df486fcbca2f7f.png

结论:

http 文件上传,http协议通过定义:boundary=---------------------------7e131a1ade2200 来实现每个字段域直接的分割

针对普通的文本域,比如:username,password等 

 

-----------------------------7e131a1ade2200
Content-Disposition: form-data; name="username"

xinchun.wang
-----------------------------7e131a1ade2200

 

针对文件上传的文本文件格式为:

-----------------------------7e131a1ade2200
Content-Disposition: form-data; name="pics1"; filename="a.txt"
Content-Type: text/plain

com_qunar_mall_gtt,gtt.mall.qunar.com,AFARE
-----------------------------7e131a1ade2200

 

针对图片上传格式同文件:



 

以上是通过wireshark 查看的客户端请求的报文

 

后记:

apache common fileupload 等组件 就是通过把 ---------------------------7e131a1ade2200 \r\n 转换为 二进制数组,然后根据request 返回的InputStream 逐个字节的匹配,以boundary的二进制内容为分割点,逐步解析的。

核心实现类:org.apache.commons.fileupload.MultipartStream

### Element UI el-upload 组件 auto-upload 属性用法及配置 `auto-upload` 是 Element UI 的 `el-upload` 组件中的一个属性,用于控制文件上传是否在选择文件后立即触发。如果将其设置为 `false`,则需要手动调用组件的 `submit` 方法来触发上传操作[^1]。 以下是关于 `auto-upload` 属性的具体说明和使用方法: #### 1. 基本用法 当 `auto-upload` 属性被设置为 `true`(默认值)时,用户选择文件后会立即触发上传操作。如果将其设置为 `false`,则需要通过手动调用组件实例的 `submit` 方法来执行上传操作。 ```html <el-upload action="https://jsonplaceholder.typicode.com/posts/" :auto-upload="false" :on-change="handleChange"> <el-button slot="trigger" type="primary">选取文件</el-button> <el-button style="margin-left: 10px;" @click="uploadFile">上传到服务器</el-button> </el-upload> ``` #### 2. 手动触发上传 当 `auto-upload` 设置为 `false` 时,可以通过以下方式手动触发上传: - 在模板中绑定按钮事件,调用组件实例的 `submit` 方法。 - 示例代码如下: ```javascript export default { methods: { uploadFile() { this.$refs.upload.submit(); // 调用组件实例的 submit 方法 }, handleChange(file, fileList) { console.log('文件改变:', file, fileList); } } } ``` #### 3. 自定义上传逻辑 如果需要实现自定义上传逻辑,可以结合 `http-request` 属性来实现。例如,使用 Axios 发起自定义的 HTTP 请求。 ```html <el-upload action="#" :auto-upload="false" :http-request="customUpload"> <el-button slot="trigger" type="primary">选取文件</el-button> <el-button style="margin-left: 10px;" @click="uploadFile">上传到服务器</el-button> </el-upload> ``` ```javascript export default { methods: { uploadFile() { this.$refs.upload.submit(); }, customUpload(params) { const formData = new FormData(); formData.append('file', params.file); axios.post('https://jsonplaceholder.typicode.com/posts/', formData) .then(response => { console.log('上传成功:', response); }) .catch(error => { console.error('上传失败:', error); }); } } } ``` #### 4. 注意事项 - 如果 `auto-upload` 设置为 `false`,必须确保通过 `submit` 方法手动触发上传,否则文件不会被上传。 - 在自定义上传逻辑中,可以使用 `before-upload` 钩子函数对文件进行预处理或校验。 - 如果需要显示上传进度,可以结合 `on-progress` 钩子函数实现[^2]。 ### 总结 `auto-upload` 属性提供了灵活的文件上传控制机制。通过将其设置为 `false`,可以实现更复杂的上传逻辑,例如批量上传、文件校验或自定义 HTTP 请求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值