NodeJS Request 如何发送 multipart/form-data POST 请求

Question

I'm trying to send a POST request to an API with an image in the request. I'm doing this with the request module but everything I try it isn't working. My current code:

const options = {
    method: "POST",
    url: "https://api.LINK.com/file",
    port: 443,
    headers: {
        "Authorization": "Basic " + auth,
        "Content-Type": "multipart/form-data"
    },
    form : {
        "image" : fs.readFileSync("./images/scr1.png")
    }
};

request(options, function (err, res, body) {
    if(err) console.log(err);
    console.log(body);
});

But request uses Content-Type: application/x-www-form-urlencoded for some reason... How can I fix this?

Answer 1

As explained in documentation form multipart/form-data request is using form-data library. So you need to supply formData option instead of form option.

const options = {
    method: "POST",
    url: "https://api.LINK.com/file",
    port: 443,
    headers: {
        "Authorization": "Basic " + auth,
        "Content-Type": "multipart/form-data"
    },
    formData : {
        "image" : fs.createReadStream("./images/scr1.png")
    }
};

request(options, function (err, res, body) {
    if(err) console.log(err);
    console.log(body);
});

Answer 2

Annoyed that almost all example solutions to this problem include third-party modules. I know it's often easier to simply include a module and copy/paste a code example but really shouldn't need one for basic HTTP concepts like this. Adding modules can quickly increase your footprint in cloud environments like AWS lambda where total solution file-size can drastically impact run-time performance. I found this helpful example here,

https://tanaikech.github.io/2017/07/27/multipart-post-request-using-node.js/

var fs = require('fs');
var request = require('request');
var upfile = 'sample.zip';
fs.readFile(upfile, function(err, content){
    if(err){
        console.error(err);
    }
    var metadata = {
        token: "### access token ###",
        channels: "sample",
        filename: "samplefilename",
        title: "sampletitle",
    };
    var url = "https://slack.com/api/files.upload";
    var boundary = "xxxxxxxxxx";
    var data = "";
    for(var i in metadata) {
        if ({}.hasOwnProperty.call(metadata, i)) {
            data += "--" + boundary + "\r\n";
            data += "Content-Disposition: form-data; name=\"" + i + "\"; \r\n\r\n" + metadata[i] + "\r\n";
        }
    };
    data += "--" + boundary + "\r\n";
    data += "Content-Disposition: form-data; name=\"file\"; filename=\"" + upfile + "\"\r\n";
    data += "Content-Type:application/octet-stream\r\n\r\n";
    var payload = Buffer.concat([
            Buffer.from(data, "utf8"),
            new Buffer(content, 'binary'),
            Buffer.from("\r\n--" + boundary + "--\r\n", "utf8"),
    ]);
    var options = {
        method: 'post',
        url: url,
        headers: {"Content-Type": "multipart/form-data; boundary=" + boundary},
        body: payload,
    };
    request(options, function(error, response, body) {
        console.log(body);
    });
});

Hope it's helpful to someone else!

Answer 3

With request module deprecated , consider using form-data and core http(s) module instead.

It's a little bit more verbose but you get smaller production builds, which is always good, even more so in serverless environments where it may reduce cold start time.

// abstract and promisify actual network request
async function makeRequest(formData, options) {
  return new Promise((resolve, reject) => {
    const req = formData.submit(options, (err, res) => {
      if (err) {
        return reject(new Error(err.message))
      }

      if (res.statusCode < 200 || res.statusCode > 299) {
        return reject(new Error(`HTTP status code ${res.statusCode}`))
      }

      const body = []
      res.on('data', (chunk) => body.push(chunk))
      res.on('end', () => {
        const resString = Buffer.concat(body).toString()
        resolve(resString)
      })
    })
  })
}

const formData = new FormData()

formData.append('comment', 'Some note attached to the submitted file')
formData.append('image', fs.createReadStream('./images/logo.png'))

const options = {
  host: 'postman-echo.com',
  path: '/post',
  method: 'POST',
  protocol: 'https:', // note : in the end
  headers: {
    Authorization: `Basic some-token-here`,
  },
}

const res = await makeRequest(formData, options)

Answer 4

I wanted to build a working example in typescript with no external dependencies. I would still recommend the solution above but figured this might be helpful for others. The only external dependency here is mime-types to set the content-type header but if you know the content type being uploaded in advance this could be removed, making the solution completely dependency free.

implementation:

/* eslint-disable prefer-template */
import http from 'http';
import fs from 'fs';
import mime from 'mime-types';

interface FileObject extends Record<string, string> {
  fileName: string,
}

const buildFormInputFields = (fileObj: FileObject) => Object.entries(fileObj).map(
  ([key, value], index) => {
    const pairStr = `name="${key}"; ${key}="${value}"`;
    return index === Object.keys(fileObj).length - 1 ? pairStr : `${pairStr};`;
  },
).join(' ');

const createFileRequest = (
  fileObj: FileObject,
  data: Buffer,
  boundary: string,
) => {
  const inputFields = buildFormInputFields(fileObj);
  const { fileName } = fileObj;
  const mimeType = mime.lookup(fileName);
  if (!mimeType) throw new Error(`invalid mime type for file ${fileName}`);
  const header = (
    `--${boundary}\r\n`
    + `Content-Disposition: form-data; ${inputFields}`
    + '\r\n'
    + `Content-Type: ${mime.lookup(fileObj.fileName)}`
    + '\r\n\r\n'
  );
  return Buffer.concat([
    Buffer.from(header, 'utf-8'),
    data,
    Buffer.from('\r\n', 'utf-8'),
  ]);
};

const buildRequestOptions = (boundary: string, length: number) => (
  {
    // your host here
    host: 'localhost',
    // your port here
    port: 8088,
    // your endpoint here
    path: '/api/v1/files',
    method: 'POST',
    headers: {
      'Content-Type': `multipart/form-data; boundary=${boundary}`,
      'Content-Length': length,
      Accept: '*/*',
    },
  }
);

const sendFileUploadRequest = (files: FileObject[], boundary: string) => new Promise(
  (resolve, reject) => {
    const fileBodies = files.map((fileObj) => {
      const { fileName } = fileObj;
      const data = fs.readFileSync(`${__dirname}/${fileName}`);
      return createFileRequest(fileObj, data, boundary);
    });

    const footer = `--${boundary}--`;

    const body = Buffer.concat([
      ...fileBodies,
      Buffer.from(footer, 'utf-8'),
    ]);

    const options = buildRequestOptions(boundary, body.length);

    const req = http.request(options, (res) => {
      console.log(`status: ${res.statusCode}`);

      res.on('data', (chunk) => {
        console.log(`BODY: ${chunk}`);
      });

      res.on('end', () => {
        console.log('No more data in response.');
        resolve(null);
      });
    });

    req.on('error', (e) => {
      reject(e);
      console.error(`problem with request: ${e.message}`);
    });
    req.write(body);
    req.end();
  },
);

example script using this:

(async () => {
  const files: FileObject[] = [
    {
      fileName: 'test1.txt',
      foo: 'bar',
    },
    {
      fileName: 'test2.txt',
      foo: 'bar',
    },
  ];
  const boundary = '----FOOBAR';
  await sendFileUploadRequest(files, boundary);
})();