使用 FormData 多部分发布请求在节点 js 中上传文件

Question

I don't understand what is wrong with this use case. If the body of the requested file is passed to form-data directly http upload doesn't work but if write to file and then pass file stream reader to form-data request works.

Test client

import fs from "fs";
import FormData from "form-data";
import ky from "ky-universal";

const main = async () => {
  const { body } = await ky.get(
    "https://file-examples-com.github.io/uploads/2017/10/file-sample_150kB.pdf"
  );

  const form = new FormData();

  // This works
  const writeStream = fs.createWriteStream("./tmp.pdf");
  body.pipe(writeStream);
  const fileStream = fs.createReadStream("./tmp.pdf");
  form.append("file", fileStream);

  // This doesn't work
  // form.append("file", body);

  form.append("param", "param value");

  const res = await ky.post(`http://localhost:3030/upload`, {
    timeout: 20000,
    body: form,
  });

  const json = await res.json();
  console.log(json);
};

Test server

// mkdir uploads
// npm install express multer
import express from "express";
import multer from "multer";

var upload = multer({ dest: "uploads/" });

var app = express();

app.post(
  "/upload",
  upload.single("file"),
  function (req, res, next) {
    console.dir(req.file);
    console.dir(req.body);
    res.json({ ok: true });
  }
);

app.listen(process.env.PORT || 3030);

https://gist.github.com/davidnussio/8148b2296a476637bb7e4dae8cf52d44

UPDATE

Workaround

Maybe related with this issue and maybe related to me working with node PassThrough streams but as workaround, instead to plug response directly to form-data to the post request i consume the stream to new buffer variable.

async function client() {
  const { body } = await ky.get(
    "https://file-examples-com.github.io/uploads/2017/10/file-sample_150kB.pdf"
  );

  return new Promise((resolve, reject) => {
    const data = [];
    const writableStream = new stream.Writable({
      defaultEncoding: "utf-8",
    });

    writableStream._write = (chunk, encoding, next) => {
      data.push(Buffer.from(chunk, encoding));
      next();
    };

    stream.pipeline(body, writableStream, (err) => {
      if (err) {
        return reject(err);
      }
      const form = new FormData();

      const buffer = Buffer.concat(data);

      form.append("file", buffer, { filename: 'tmp.pdf' });
      form.append("param", "param-value");

      ky.post(url1, {
        timeout: 20000,
        body: form,
      })
        .json()
        .then((json) => resolve(json))
        .catch((error) => reject(error.message));
    });
  });
}

Answer 1

To upload a file you need to send the correct content-type in the header ( "multipart/form-data"). The FormData prepares the header for you and you can obtain this header through form.getHeaders().