后台express需要connect-multiparty模块接收formData的数据类型

  1.  class ourFormData {
  2.       constructor(data, rs) {
  3.         return new String((function (data, rs) {
  4.           let data_string = '\r\n'
  5.           for (let [k, v] of Object.entries(data)) {
  6.             if (({}).toString.call(v) === '[object Array]') {
  7.               for (let el of v) {
  8.                 data_string +=
  9.                   `------WebKitFormBoundary${rs}\r\nContent-Disposition: form-data; name="${k}"\r\n\r\n${el}\r\n`;
  10.               }
  11.             } else {
  12.               data_string +=
  13.                 `------WebKitFormBoundary${rs}\r\nContent-Disposition: form-data; name="${k}"\r\n\r\n${v}\r\n`;
  14.             }
  15.           }
  16.           data_string += `------WebKitFormBoundary${rs}--`
  17.           return data_string;
  19.         })(data, rs));
  20.       }
  21.     }
  23.     function random(a, b) {
  24.       return Math.floor(Math.random() * (b - a + 1) + a);
  25.     }
  27.     function randomString32(len) {
  28.       const loopn = len || 32;
  29.       const c = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
  30.       const c_len = c.length;
  31.       let res = '';
  32.       for (let i = 0; i < loopn; i++) {
  33.         res += c.charAt(random(0, c_len - 1));
  34.       }
  35.       return res;
  36.     }
  38.     let xhr = new XMLHttpRequest;
  39.     xhr.open('post', 'http://localhost:3000/');
  40.     let rs = randomString32(16);
  41.     xhr.setRequestHeader('Content-Type', `multipart/form-data; boundary=----WebKitFormBoundary${rs}`);
  43.    // let rs = Date.now().toString(16) // Docs:
  44.     xhr.send(new ourFormData({
  45.       name: ['ajanuw', 'alone'],
  46.       age: 11
  47.     }, rs));
  49.     xhr.onload = e => {
  50.       console.log(xhr.response);
  51.     }

  1. router.post('/', function (req, res, next) {
  2.   l(req.body)
  3.   res
  4.      .set({
  5.        'access-control-allow-origin': '*'
  6.      })
  7.      .send('hello');
  8. });

上传文件 Docs

  1. <body>
  2.   <input type="file" name="file" id="file">
  3.   <script>
  4.     let l = console.log
  5.     class OurFormData {
  6.       constructor(data, rs) {
  7.         let data_string = '\r\n'
  8.         this.segments = []
  9.         this.rs = rs
  10.         this.status = 0
  11.         let resolve
  12.         let result = new Promise(res => resolve = res)
  14.         let k, v
  15.         let getTag = v => ({}).toString.call(v)
  16.         for ([k, v] of Object.entries(data)) {
  17.           let tag = getTag(v)
  18.           if (tag === '[object File]') {
  19.             // 单文件
  20.             let render = new FileReader()
  21.             render.readAsBinaryString(v);
  22.             render.index = this.segments.length
  24.             render.onload = ({
  25.               target: {
  26.                 result
  27.               }
  28.             }) => {
  29.               this.segments[render.index] += `${result}\r\n`
  30.               this.status--
  32.               // 所有异步全部完成
  33.               if (this.status === 0) {
  34.                 resolve(this.handleResData(this.segments))
  35.               }
  36.             }
  38.             this.segments.push(
  39.               `------WebKitFormBoundary${this.rs}\r\nContent-Disposition: form-data; name="${k}"; filename="${v.name}"\r\nContent-Type: "${v.type}"\r\n\r\n`
  40.             )
  41.             this.status++
  42.           } else if (tag === '[obejct Array]' && v.length > 0 && getTag(v[0]) === '[object File]') {
  43.             // 多文件
  44.             let file, render
  45.             for (file of v) {
  46.               render = new FileReader()
  47.               render.readAsBinaryString(file);
  48.               render.index = this.segments.length
  50.               render.onload = ({
  51.                 target: {
  52.                   result
  53.                 }
  54.               }) => {
  55.                 this.segments[render.index] += `${result}\r\n`
  56.                 this.status--
  58.                 // 所有异步全部完成
  59.                 if (this.status === 0) {
  60.                   resolve(this.handleResData(this.segments))
  61.                 }
  62.               }
  64.               this.segments.push(
  65.                 `------WebKitFormBoundary${this.rs}\r\nContent-Disposition: form-data; name="${k}"; filename="${v.name}"\r\nContent-Type: "${v.type}"\r\n\r\n`
  66.               )
  67.               this.status++
  68.             }
  69.           } else if (tag === '[object Array]') {
  70.             // 处理数组, age: [12, 14]
  71.             let $_
  72.             for ($_ of v) {
  73.               this.segments.push(
  74.                 `------WebKitFormBoundary${this.rs}\r\nContent-Disposition: form-data; name="${k}"\r\n\r\n${$_}\r\n`
  75.               )
  76.             }
  77.           } else {
  78.             // string and number
  79.             this.segments.push(
  80.               `------WebKitFormBoundary${this.rs}\r\nContent-Disposition: form-data; name="${k}"\r\n\r\n${v}\r\n`
  81.             )
  82.           }
  83.         }
  84.         if (this.status === 0) {
  85.           resolve(this.handleResData(this.segments))
  86.         }
  87.         return result
  88.       }
  90.       handleResData(segments) {
  91.         segments.unshift(`\r\n`)
  92.         segments.push(`------WebKitFormBoundary${this.rs}--`)
  93.         let data = segments.join('')
  95.         let bytes = data.length
  96.         // let view = new Uint8Array(bytes)
  97.         // for (let i = 0; i < bytes; i++) {
  98.         //   view[i] = data.charCodeAt(i) & 0xff
  99.         // }
  100.         let buffer = new ArrayBuffer(bytes)
  101.         let view = new DataView(buffer, 0)
  102.         let i
  103.         for (i = 0; i < bytes; i++) {
  104.           // & 0xff https://www.cnblogs.com/think-in-java/p/5527389.html
  105.           // view.setUint8(i, data.charCodeAt(i) & 0xff)
  106.           view.setUint8(i, data.codePointAt(i) & 0xff)
  107.         }
  108.         return view
  109.       }
  110.     }
  112.     (async function main() {
  113.       let data = {
  114.         name: 'ajanuw',
  115.         age: [1,2]
  116.       }
  117.       document.querySelector('#file').onchange = async ({
  118.         target: {
  119.           files
  120.         }
  121.       }) => {
  122.         if (files.length === 0) return;
  123.         let file = files[0]
  124.         Object.assign(data, {
  125.           file
  126.         })
  128.         let rs = Date.now().toString(16)
  129.         let sendData = await new OurFormData(data, rs)
  131.         let formdata = new FormData()
  132.         formdata.append('file', file)
  133.         let res = await post('http://localhost:5000/test3', sendData, rs)
  134.         l(res)
  135.       }
  136.     })()
  138.     function post(url, data, rs) {
  139.       return new Promise(resolve => {
  140.         let xhr = new XMLHttpRequest()
  141.         xhr.open('post', url)
  142.         xhr.setRequestHeader('Content-Type', `multipart/form-data; boundary=----WebKitFormBoundary${rs}`)
  143.         xhr.send(data)
  144.         xhr.onload = e => {
  145.           resolve(xhr.response)
  146.         }
  147.       })
  148.     }
  149.   </script>
  151. </body>
  1. // 后台
  2.   @Post('test3')
  3.   @UseInterceptors(FileInterceptor('file'))
  4.   @Header('Access-Control-Allow-Origin', '*')
  5.   test3(@UploadedFile() file, @Body() body) {
  6.     l(file)
  7.     l(body)
  8.     const writeFile = createWriteStream(join(__dirname, '..', 'upload', `${Date.now().toString(16) +'-'+ file.originalname}`))
  9.     writeFile.write(file.buffer, () => {
  10.       l('文件已保存~')
  11.     })
  12.     return body
  13.   }
  15.   @Options('test3')
  16.   @Header('Access-Control-Allow-Origin', '*')
  17.   testOption() {
  19.   }
  1. // 打印信息
  3. { fieldname: 'file',
  4.   originalname: 'kishin-sagume-touhou-wings-wall-red-eyes-24385.jpg',
  5.   encoding: '7bit',
  6.   mimetype: 'image/jpeg',
  7.   buffer:
  8.    <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 ... >,
  9.   size: 983894 }
  10. { name: 'ajanuw', age: [ '1', '2' ] }
  11. 文件已保存~

js模拟发送 FormData数据的更多相关文章

  1. 利用fiddler模拟发送json数据的post请求

    fiddler是调试利器,有许多好用的功能,这里简单的介绍一下利用fiddler模拟发送post请求的例子 先简单介绍一下失败的例子,最后给出正确的方法

  2. C#小爬虫，通过URL进行模拟发送接收数据

    public async Task<string> SendDataAsync(HttpMethod httpMethod, string requestUrl, HttpContent ...

  3. mock.js模拟生成假数据

    mock使用方法很简单, 下面是简单的用法, 详细的用法可以看官方文档, 写的很清楚, 下面的代码直接拷贝到本地html文件, 双击打开即可生成你想要的数据 <!DOCTYPE html> ...

  4. node.js 模拟自动发送邮件验证码

    node.js 模拟自动发送邮件验证码 引言 正文 1. QQ邮箱设置 2. 安装nodemailer 3.配置信息 4.综合 5.讲解 结束语 引言 先点赞,再看博客,顺手可以点个关注. 微信公众号 ...

  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 ...

  6. nodejs获取post请求发送的formData数据

    前端post请求发送formData的类型数据时,需要服务端引入中间件body-parser,主要原因是post请求发送的数据,是在http的body里面,所以需要进行解析,否则获取不到数据(数据为空 ...

  7. 【转】nodejs获取post请求发送的formData数据

    前端post请求发送formData的类型数据时,需要服务端引入中间件body-parser,主要原因是post请求发送的数据,是在http的body里面,所以需要进行解析,否则获取不到数据(数据为空 ...

  8. VC模拟发送数据包－百度关键词查找

    VC模拟发送数据包-百度关键词查找 逗比汪星人2009-09-06上传   VC模拟发送数据包-百度关键词abcdef查找 详情 http://blog.csdn.net/wangningyu htt ...

  9. js模拟form表单提交数据, js模拟a标签点击跳转，避开使用window.open引起来的浏览器阻止问题

    js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...

随机推荐

  1. JSR 整理、翻译

    https://jcp.org/en/jsr/all https://github.com/search?l=Java&q=JSR&type=Repositories

  2. WPF参考

    web 调用本地exe 程序,传入参数https://www.cnblogs.com/anjou/p/10045177.html WPF常用控件样式https://www.cnblogs.com/s0 ...

  3. exception:Failed to execute 'toDataURL' on 'HTMLCanvasElement' 解决方案

      1.情景展示 当使用canvas 将图片转为base64报错信息如下: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLC ...

  4. 机器人中的轨迹规划（Trajectory Planning ）

    Figure. Several possible path shapes for a single joint 五次多项式曲线(quintic polynomial) $$\theta(t)=a_0+ ...

  5. [转]The Production Environment at Google

    A brief tour of some of the important components of a Google Datacenter.   A photo of the interior o ...

  6. Lucene与Solr基础

    SolrSelectTest 查询与删除 package com.snow.solr; import com.snow.bean.Product; import org.apache.solr.cli ...

  7. 腾讯云服务器web环境配置过程

    我买的服务器是: 可用区:香港二区 实例类型:标准型S2 操作系统:CentOS 6.5 64位 自己的电脑是 win10 ------------以上是背景------------------ 1 ...

  8. Spring Boot入门一：在Eclipse中使用Spring boot

    1.安装插件 打开Eclipse-Help-Eclipse Marketplace-搜索spring tools,找到对应工具安装 下载完成后,重启eclipse,选择新建project-spring ...

  9. ASP.NET CORE下运行CMD命令

    ASP.NET CORE下运行CMD命令,用以前的ASP.NET 的命令System.Diagnostics.Process.Start("notepad");这样是可以运行出记事 ...

  10. Replication基础(六) 复制中的三个线程（IO/SQL/Dump）

    Reference:  https://blog.csdn.net/sun_ashe/article/details/82181811?utm_source=blogxgwz1 简介在MySQL复制技 ...