NodeJS Request 如何發送 multipart/form-data POST 請求

Question

我正在嘗試將 POST 請求發送到請求中包含圖像的 API。 我正在使用請求模塊執行此操作，但我嘗試的所有操作均無效。 我當前的代碼：

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

但是請求使用Content-Type: application/x-www-form-urlencoded出於某種原因......我該如何解決這個問題？

Answer 1

正如文檔中所解釋的，表單multipart/form-data請求正在使用form-data數據庫。 所以你需要提供formData選項而不是form選項。

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

惱火的是，幾乎所有解決此問題的示例解決方案都包含第三方模塊。 我知道簡單地包含一個模塊並復制/粘貼一個代碼示例通常更容易，但對於像這樣的基本 HTTP 概念來說真的不需要一個。 添加模塊可以快速增加您在 AWS lambda 等雲環境中的占用空間，其中總解決方案文件大小會極大地影響運行時性能。 我在這里找到了這個有用的例子，

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

希望對其他人有幫助！

Answer 3

不推薦使用request模塊，請考慮使用form-data和核心http(s)模塊。

它有點冗長，但你會得到更小的生產構建，這總是好的，在無服務器環境中更是如此，因為它可以減少冷啟動時間。

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

我想在沒有外部依賴的打字稿中構建一個工作示例。 我仍然會推薦上面的解決方案，但認為這可能對其他人有幫助。 這里唯一的外部依賴是用於設置內容類型標頭的mime-types ，但如果您知道提前上傳的內容類型，則可以將其刪除，從而使解決方案完全沒有依賴性。

執行：

/* 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();
  },
);

使用這個的示例腳本：

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