js模拟发送 FormData数据

最新推荐文章于 2024-06-10 16:58:43 发布
最新推荐文章于 2024-06-10 16:58:43 发布
阅读量1.2k 收藏 1
点赞数 1
文章标签： 移动开发
原文链接：http://www.cnblogs.com/ajanuw/p/9371288.html
版权

后台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);
    }

1053296-20180727170526655-172914745.png

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' ] }
文件已保存~

转载于:https://www.cnblogs.com/ajanuw/p/9371288.html

weixin_33976072
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS FormData上传文件的设置方法
12-08
使用FormData上传文件时，总是获取不到req.file对象。发现是没有配置对FormData导致。 这里我是在vue中使用axios发送的请求，配置代码如下。重点地方给出注释 <form id="uploadform" method="POST" enctype="multipart/form-data" :action="postImgApi" ref="uploadform"> <input type="file" name="imagefile" @change="upload" ref="inputfile"> </form> let uploadform = this.$r
js formData对象。主要用于发送表单数据
热门推荐
ma_yajie的博客
07-04 1万+
FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。如果表单enctype属性设为multipart/form-data ，则会使用表单的submit()方法来发送数据，从而，发送数据具有同样形式。从零开始创建FormData对象你可以自己创建一个FormData对象，然...
掌握JavaScript中的FormData对象
最新发布
你若盛开，清风自来
06-10 466
本文将介绍JavaScript中的FormData对象，包括其创建方式、属性、方法和应用场景。了解FormData对象，可以帮助开发者更好地处理表单数据，实现文件上传等功能。FormData对象提供了一种灵活和强大的方式来处理表单数据，支持文件上传和异步提交等功能。了解FormData对象的创建方式、属性和方法，可以帮助开发者更好地处理表单数据，提高Web应用的功能性和用户体验。
js请求 用formdata格式传递参数
彦祖的博客
02-07 1537
js请求 用formdata格式传递参数。
【转载】js formData对象。主要用于发送表单数据
beidaol的专栏
01-07 224
转自：https://blog.csdn.net/ma_yajie/article/details/80907046 FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。如果表单enctype属性设为multipart/form-data ，则会使用表单的submit(...
模拟上传multipart/form-data/脚本生成时间轴
weixin_33895657的博客
05-11 115
模拟上传multipart/form-data,脚本生成时间轴 首先是时间轴的脚本 最终效果 首先前端代码是找的模板,懒省事但是历史线文字是需要我们来填补的吧 工作室历史线比较长，也不可能手动来搞～～～～ 分下源代码，我们就可以整理下思路,我们现在要做的就是读取整理好的历史文本里的内容 然后生成html内容,因为这个模板每个历史展现是相同的,只是item代号不同,也只是分为两种 一开始为了方便，...
使用axios请求时,发送formData请求的示例
10-16
`FormData`是一种特殊的JavaScript对象，它允许我们构建键值对，以模拟HTML表单提交的数据格式。这对于上传文件或发送包含多个部分的数据尤其有用。下面，我们将探讨如何使用`axios`和`FormData`进行交互。 首先，...
jquery-formdata-master js上传插件源码，有需要的小伙伴可以下载
11-04
使用`jQuery-formdata-master`，开发者可以轻松地将表单数据或者单独的文件封装到FormData对象中，并通过Ajax或fetch API发送到服务器。例如： ```javascript // 导入jQuery和jQuery-formdata插件 ...
JavaScript程序设计-FormData对象的使用.pdf
11-02
在JavaScript中，FormData对象是XMLHttpRequest 2级引入的一个重要特性，它主要用于处理和发送与HTML表单类似的数据，尤其在进行异步文件上传时发挥着关键作用。本篇文章将深入探讨FormData对象的用途、创建、数据...
FormData实现文件上传（前端+后端）
07-12
`FormData`对象是HTML5引入的一个重要特性，它允许我们创建一个包含键值对的数据结构，特别适合用来发送二进制数据，如文件，到服务器。在本教程中，我们将深入探讨如何使用`FormData`来实现文件上传，包括前端和...
在小程序中使用formdata上传数据，可实现多文件上传.zip
09-30
在微信小程序中，开发者经常需要处理用户的数据上传，例如图片、文件等。...记住，实际开发中需要根据服务器端的API接口文档来调整`FormData`的构造方式，确保数据能正确地发送到服务器并被正确解析。
jQuery的ajax发送FormData的方式
01-23
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form id="form"> <input type="text" name="username"> <input type="file" name="file"> <input type="button" id="btn" value="提交"> </form> [removed][removed] [removed] var form = $('#form')[0]; // 获取到表单的DOM对象形式 $('#btn').on('click', function () { // 1 使用FormData进行表单的数据处理 var fd = new FormData(form); // 2 使用$.ajax发送fd // 需要指定两个属性 // - processData : false // - contentType : false $.ajax({ method : 'POST', url : '/ajax_Day5/datas03.php', data : fd, success : function (data) { console.log(data); }, processData : false, contentType : false }); }); [removed] </body> </html>
JS FormData 模拟文件上传
weilu876的博客
09-09 300
JS FormData 模拟文件上传 let form = new FormData(); let config_text = $("#config-textarea").val(); let blob = new Blob([config_text], { type: ‘text/plain’ }); form.append(“UploadConfig”,blob,“simple.yaml”);
js文件上传原理（form表单 ，FormData + XHR2 + FileReader + canvas）
02-17 974
目录 form表单上传 FormData + XHR2 + FileReader + canvas 无刷新本地预览压缩上传实例 目前实现上传的方式 浏览器小于等于IE9(低版本浏览器)使用下面的方式实现的 flash实现（主流插件的方式，本文不涉及） form + iframe（项目中很少用到，本文不涉及） form表单提交的方式是所有浏览器都支持的，借助iframe是为了实现不...
JS导入文件并调用接口提交（FormData格式）
weixin_48005976的博客
11-28 1513
JS导入文件并调用接口提交（FormData格式）
js上传文件到服务器 formdata格式参数
Tangsze的博客
12-08 1442
好长时间没有更新文章了，今天写点关于js上传文件的问题 上传文件用input type=file，通过onchange事件获取到上传文件的信息，这个大家都知道。那么通过ajax上传到服务器传formdata格式该怎么写呢？ 首先，new一个FormData var sD = new FormData() 然后，把获取到的文件信息append进去 // file就是获取到的文件信息 sD.append('type', 'bidfile') sD.append('bidfile', file) 通过ajax
JavaScript 表单事件
weixin_30500105的博客
08-02 152
表单事件，当用户与表单元素进行交互时发生。 实例： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>表单事件</title> 5 <meta charset="UTF-8"> 6 &l...
js+formdata+ blob自动上传文件
balance的博客
01-25 2564
代码参考 http://note.youdao.com/noteshare?id=889c43526b412fd47bf475b9b42e664d  
XML DOM - XMLHttpRequest 对象简介
X_manchina的专栏
08-30 388
XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。XMLHttpRequest 对象是名为 AJAX的 Web 应用程序架构的一项关键功能属性：readyStatereadyState 的
nodejs 发送formdata数据
10-01
使用Node.js发送FormData数据，可以使用`form-data`模块来实现。下面是一个示例代码： 首先，需要安装`form-data`模块。在命令行中执行以下命令： ``` npm install form-data ``` 然后，可以使用以下代码发送...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值