http-post-upload 格式

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

 

浏览器:

 

 

客户端发送的请求:

http://dl2.iteye.com/upload/attachment/0124/6600/0e51b48c-9d8f-35b8-ab95-9b0727d0e7c4.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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-upload是Element UI中的一个组件,用于实现文件上传功能。而http-request是一个自定义的文件上传方法。 el-upload组件可以通过设置action属性来指定文件上传的地址。默认情况下,el-upload会使用浏览器的XMLHttpRequest对象发送文件上传请求。但是在某些情况下,我们可能需要自定义文件上传的方法,这时可以使用http-request来实现。 http-request是一个自定义的文件上传方法,它可以通过发送HTTP请求来实现文件上传。在Vue中,我们可以使用axios库来发送HTTP请求。通过在el-upload组件的before-upload属性中调用http-request方法,我们可以实现自定义的文件上传逻辑。 以下是一个使用el-uploadhttp-request实现文件上传的示例: ```vue <template> <el-upload class="upload-demo" action="" :before-upload="beforeUpload" > <el-button size="small" type="primary">点击上传</el-button> </el-upload> </template> <script> import axios from 'axios'; export default { methods: { beforeUpload(file) { // 构建FormData对象 const formData = new FormData(); formData.append('file', file); // 发送HTTP请求 axios.post('/upload', formData) .then(response => { // 文件上传成功的处理逻辑 console.log(response.data); }) .catch(error => { // 文件上传失败的处理逻辑 console.error(error); }); // 阻止el-upload组件默认的文件上传行为 return false; } } } </script> ``` 在上述示例中,el-upload组件的action属性被设置为空字符串,这是因为我们将使用http-request来发送文件上传请求。在before-upload属性中,我们调用了beforeUpload方法来处理文件上传逻辑。在beforeUpload方法中,我们首先构建了一个FormData对象,并将文件添加到其中。然后,我们使用axios库发送了一个POST请求,将FormData对象作为请求体发送到服务器。最后,我们阻止了el-upload组件默认的文件上传行为,以避免重复上传文件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值