js模拟发送 FormData数据
后台express需要connect-multiparty模块接收formData的数据类型
class ourFormData {
constructor(data, rs) {
return new String((function (data, rs) {
let data_string = '\r\n'
for (let [k, v] of Object.entries(data)) {
if (({}).toString.call(v) === '[object Array]') {
for (let el of v) {
data_string +=
`------WebKitFormBoundary${rs}\r\nContent-Disposition: form-data; name="${k}"\r\n\r\n${el}\r\n`;
}
} else {
data_string +=
`------WebKitFormBoundary${rs}\r\nContent-Disposition: form-data; name="${k}"\r\n\r\n${v}\r\n`;
}
}
data_string += `------WebKitFormBoundary${rs}--`
return data_string;
})(data, rs));
}
}
function random(a, b) {
return Math.floor(Math.random() * (b - a + 1) + a);
}
function randomString32(len) {
const loopn = len || 32;
const c = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
const c_len = c.length;
let res = '';
for (let i = 0; i < loopn; i++) {
res += c.charAt(random(0, c_len - 1));
}
return res;
}
let xhr = new XMLHttpRequest;
xhr.open('post', 'http://localhost:3000/');
let rs = randomString32(16);
xhr.setRequestHeader('Content-Type', `multipart/form-data; boundary=----WebKitFormBoundary${rs}`);
// let rs = Date.now().toString(16) // Docs:
xhr.send(new ourFormData({
name: ['ajanuw', 'alone'],
age: 11
}, rs));
xhr.onload = e => {
console.log(xhr.response);
}
router.post('/', function (req, res, next) {
l(req.body)
res
.set({
'access-control-allow-origin': '*'
})
.send('hello');
});
上传文件 Docs
<body>
<input type="file" name="file" id="file">
<script>
let l = console.log
class OurFormData {
constructor(data, rs) {
let data_string = '\r\n'
this.segments = []
this.rs = rs
this.status = 0
let resolve
let result = new Promise(res => resolve = res)
let k, v
let getTag = v => ({}).toString.call(v)
for ([k, v] of Object.entries(data)) {
let tag = getTag(v)
if (tag === '[object File]') {
// 单文件
let render = new FileReader()
render.readAsBinaryString(v);
render.index = this.segments.length
render.onload = ({
target: {
result
}
}) => {
this.segments[render.index] += `${result}\r\n`
this.status--
// 所有异步全部完成
if (this.status === 0) {
resolve(this.handleResData(this.segments))
}
}
this.segments.push(
`------WebKitFormBoundary${this.rs}\r\nContent-Disposition: form-data; name="${k}"; filename="${v.name}"\r\nContent-Type: "${v.type}"\r\n\r\n`
)
this.status++
} else if (tag === '[obejct Array]' && v.length > 0 && getTag(v[0]) === '[object File]') {
// 多文件
let file, render
for (file of v) {
render = new FileReader()
render.readAsBinaryString(file);
render.index = this.segments.length
render.onload = ({
target: {
result
}
}) => {
this.segments[render.index] += `${result}\r\n`
this.status--
// 所有异步全部完成
if (this.status === 0) {
resolve(this.handleResData(this.segments))
}
}
this.segments.push(
`------WebKitFormBoundary${this.rs}\r\nContent-Disposition: form-data; name="${k}"; filename="${v.name}"\r\nContent-Type: "${v.type}"\r\n\r\n`
)
this.status++
}
} else if (tag === '[object Array]') {
// 处理数组, age: [12, 14]
let $_
for ($_ of v) {
this.segments.push(
`------WebKitFormBoundary${this.rs}\r\nContent-Disposition: form-data; name="${k}"\r\n\r\n${$_}\r\n`
)
}
} else {
// string and number
this.segments.push(
`------WebKitFormBoundary${this.rs}\r\nContent-Disposition: form-data; name="${k}"\r\n\r\n${v}\r\n`
)
}
}
if (this.status === 0) {
resolve(this.handleResData(this.segments))
}
return result
}
handleResData(segments) {
segments.unshift(`\r\n`)
segments.push(`------WebKitFormBoundary${this.rs}--`)
let data = segments.join('')
let bytes = data.length
// let view = new Uint8Array(bytes)
// for (let i = 0; i < bytes; i++) {
// view[i] = data.charCodeAt(i) & 0xff
// }
let buffer = new ArrayBuffer(bytes)
let view = new DataView(buffer, 0)
let i
for (i = 0; i < bytes; i++) {
// & 0xff https://www.cnblogs.com/think-in-java/p/5527389.html
// view.setUint8(i, data.charCodeAt(i) & 0xff)
view.setUint8(i, data.codePointAt(i) & 0xff)
}
return view
}
}
(async function main() {
let data = {
name: 'ajanuw',
age: [1,2]
}
document.querySelector('#file').onchange = async ({
target: {
files
}
}) => {
if (files.length === 0) return;
let file = files[0]
Object.assign(data, {
file
})
let rs = Date.now().toString(16)
let sendData = await new OurFormData(data, rs)
let formdata = new FormData()
formdata.append('file', file)
let res = await post('http://localhost:5000/test3', sendData, rs)
l(res)
}
})()
function post(url, data, rs) {
return new Promise(resolve => {
let xhr = new XMLHttpRequest()
xhr.open('post', url)
xhr.setRequestHeader('Content-Type', `multipart/form-data; boundary=----WebKitFormBoundary${rs}`)
xhr.send(data)
xhr.onload = e => {
resolve(xhr.response)
}
})
}
</script>
</body>
// 后台
@Post('test3')
@UseInterceptors(FileInterceptor('file'))
@Header('Access-Control-Allow-Origin', '*')
test3(@UploadedFile() file, @Body() body) {
l(file)
l(body)
const writeFile = createWriteStream(join(__dirname, '..', 'upload', `${Date.now().toString(16) +'-'+ file.originalname}`))
writeFile.write(file.buffer, () => {
l('文件已保存~')
})
return body
}
@Options('test3')
@Header('Access-Control-Allow-Origin', '*')
testOption() {
}
// 打印信息
{ fieldname: 'file',
originalname: 'kishin-sagume-touhou-wings-wall-red-eyes-24385.jpg',
encoding: '7bit',
mimetype: 'image/jpeg',
buffer:
<Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 00 00 01 00 01 00 00 ff fe 00 3c 43 52 45 41 54 4f 52 3a 20 67 64 2d 6a 70 65 67 20 76 31 2e 30 20 28 75 73 69 ... >,
size: 983894 }
{ name: 'ajanuw', age: [ '1', '2' ] }
文件已保存~
js模拟发送 FormData数据的更多相关文章
- 利用fiddler模拟发送json数据的post请求
fiddler是调试利器,有许多好用的功能,这里简单的介绍一下利用fiddler模拟发送post请求的例子 先简单介绍一下失败的例子,最后给出正确的方法
- C#小爬虫，通过URL进行模拟发送接收数据
public async Task<string> SendDataAsync(HttpMethod httpMethod, string requestUrl, HttpContent ...
- mock.js模拟生成假数据
mock使用方法很简单, 下面是简单的用法, 详细的用法可以看官方文档, 写的很清楚, 下面的代码直接拷贝到本地html文件, 双击打开即可生成你想要的数据 <!DOCTYPE html> ...
- node.js 模拟自动发送邮件验证码
node.js 模拟自动发送邮件验证码 引言 正文 1. QQ邮箱设置 2. 安装nodemailer 3.配置信息 4.综合 5.讲解 结束语 引言 先点赞,再看博客,顺手可以点个关注. 微信公众号 ...
- js_html_input中autocomplete="off"在chrom中失效的解决办法 使用JS模拟锚点跳转 js如何获取url参数 C#模拟httpwebrequest请求_向服务器模拟cookie发送 实习期学到的技术（一） LinqPad的变量比较功能 ASP.NET EF 使用LinqPad 快速学习Linq
js_html_input中autocomplete="off"在chrom中失效的解决办法 分享网上的2种办法: 1-可以在不需要默认填写的input框中设置 autocompl ...
- nodejs获取post请求发送的formData数据
前端post请求发送formData的类型数据时,需要服务端引入中间件body-parser,主要原因是post请求发送的数据,是在http的body里面,所以需要进行解析,否则获取不到数据(数据为空 ...
- 【转】nodejs获取post请求发送的formData数据
前端post请求发送formData的类型数据时,需要服务端引入中间件body-parser,主要原因是post请求发送的数据,是在http的body里面,所以需要进行解析,否则获取不到数据(数据为空 ...
- VC模拟发送数据包－百度关键词查找
VC模拟发送数据包-百度关键词查找 逗比汪星人2009-09-06上传 VC模拟发送数据包-百度关键词abcdef查找 详情 http://blog.csdn.net/wangningyu htt ...
- js模拟form表单提交数据, js模拟a标签点击跳转，避开使用window.open引起来的浏览器阻止问题
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
随机推荐
- 也谈谈我对Docker的简单理解
Docker能解决什么问题呢?一个工具的出现必然需要解决一些问题,Docker也不例外,简单说说我们常见的2种情况Docker是如何解决的吧.1.程序在我这跑得好好的,在你那怎么就不行呢?!这是一个典 ...
- [Java代码] Java用pinyin4j根据汉语获取各种格式和需求的拼音
pinyin4j是一个功能强悍的汉语拼音工具包,主要是从汉语获取各种格式和需求的拼音,功能强悍,下面看看如何使用pinyin4j.下面介绍用pinyin4j来做的一个根据汉语获取各种格式和需求的拼音d ...
- 国际化之Android设备支持的语种
昨天发了关于iOS支持的语种,文章最后也补了安卓支持语种列表.但最后发现安卓设备支持跟它列的有出入,我重新完全手工整理了一遍. 我将对应的语种在安卓的语言列表里的显示,也全部逐一列出来了,方便大家到时 ...
- docker中的数据库
注:自从开始使用docker,部署方面的事情就简单多了.使用docker构建的数据库容器不用直接安装,开启后就可以使用,也比以前方便很多.下面将一些要点记录下来. 下面的例子使用以下环境: - 系 ...
- Elasticsearch跨集群搜索(Cross Cluster Search)
1.简介 Elasticsearch在5.3版本中引入了Cross Cluster Search(CCS 跨集群搜索)功能,用来替换掉要被废弃的Tribe Node.类似Tribe Node,Cros ...
- 使用http load测试qps
官网 http://acme.com/software/http_load/ 安装 wget http://acme.com/software/http_load/http_load-12mar200 ...
- kafka创建topic异常
问题描述: kafak运行在weblogic账户下,jdk1.8,当在root账户下创建topic(当前账户下的jdk1.6)导致创建topic失败 ./bin/kafka-topics.sh --c ...
- 在IIS7上导出所有应用程序池的方法批量域名绑定(网站绑定)
资料来源: http://www.2cto.com/os/201410/341882.html 一点经验:导出配置文件后,建议打开看看,如果有需要调整的需要做修改. 在IIS7+上导出所有应用程序池的 ...
- Autohotkey window 下宏键盘、宏命令开发入门
- Linux报swap空间占用过高，但物理内存还有空余
收到报警,swap空间占用过高,登录到系统查看内存使用详情,看到物理内存还有很多未使用 问题分析 Swap配置对性能的影响分配太多的Swap空间会浪费磁盘空间,而Swap空间太少,则系统会发生错误.如 ...