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 ...
随机推荐
- H5传奇世界服务器架设技术及源码
以前是传奇迷,虽然现在不玩,但当作兴趣,研究了一下H5传奇世界的架设,架设成功并分享给大家.注意,此技术只可用于个人娱乐,不可用于商业用途. 首先下载 传奇世界H5源码 450M的样子. H5传奇 ...
- [asp.net core]The requested page cannot be accessed because the related configuration data for the page is invalid.
bug HTTP Error 500.19 - Internal Server Error The requested page cannot be accessed because the rela ...
- Linux下chkconfig命令
chkconfig命令主要用来更新(启动或停止)和查询系统服务的运行级信息.谨记chkconfig不是立即自动禁止或激活一个服务,它只是简单的改变了符号连接. 使用语法:chkconfig [--ad ...
- Android：如何生成自己的keystore(zz)
keystore不设置的话默认使用的是C:\Users\Fly\.Android下面的debug.keystore,每台电脑的都不一样,所以导致了无法安装的情况. 如何生成自己的keystore呢?这 ...
- jQuery数据转换与提交
json2.js序列化,即JSON对象转换成String字符串: JSON.stringify({ id: 1, name: 'jsons' }); 反序列化,即String转JSON对象: JSON ...
- JAVA项目中引用Logback的方法
一.简介 本文主要讲JAVA项目中引入Logback的方法. 二.解决 1.引入依赖. <!--Begin LogBack Log--> <!-- https://mvnreposi ...
- [转]恕我直言，在座的各位根本不会写 Java！
导语 自 2013 年毕业后,今年已经是我工作的第 4 个年头了,总在做 Java 相关的工作,终于有时间坐下来,写一篇关于 Java 写法的一篇文章,来探讨一下如果你真的是一个 Java 程序员,那 ...
- elasticsearch外网访问设置
默认情况下安装elasticsearch之后是无法进行外网访问的,可以通过设置来完成这一目的 1.更改配置文件 [***@elk01 ~]$ vim elk/config/elasticsearch. ...
- c groups
https://www.kernel.org/doc/Documentation/cgroup-v1/cgroups.txt https://developer.ibm.com/hadoop/2017 ...
- Oracle sql 统计
1.按小时统计数量 SELECT TO_CHAR(RECEIVE_TIME,'HH24') HOUR ,COUNT(*) N FROM PH_PRESCRIPTION P WHERE TO_CHAR( ...