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