node.js - 通过 reatjs 中的 multi-part/form-data 使用请求承诺上传文件

Question

我正在尝试在输入 HTML 标记内的 reactjs 中上传文件

<input
  accept="image/*"
  className={classes.input}
  id="icon-button-photo1"
  onChange={(e) => onFileUpload(e)}
  type="file"
  caption="File1"
/>;

然后onFileUpload如下：

const onFileUpload = (e) => {
  var file = e.target.files[0];
  const fs = require("fs");
  var rp = require("request-promise");
  var options = {
    method: "POST",
    uri: "http://127.0.0.1:9000/api/get_file/",
    formData: {
      // Like <input type="text" name="name">
      name: "Jenn",
      // Like <input type="file" name="file">
      file: {
        value: fs.createReadStream(file),
        options: {
          filename: file.name,
          contentType: "image/jpg",
        },
      },
    },
    headers: {
      /* 'content-type': 'multipart/form-data' */
      // Is set automatically
    },
  };

  rp(options)
    .then(function (body) {
      // POST succeeded...
    })
    .catch(function (err) {
      // POST failed...
    });
};

但是上面的代码给了我以下错误：

TypeError: fs.createReadStream is not a function

有人可以给我任何线索来提出正确的代码吗？

Answer 1

您只需要创建一个 FormData 对象来执行此操作，正如 Evan Trimboli 上面所说的！

看一下这个代码示例，使用 FormData 和 fetchAPI 发出带有 promise 的请求。

const onFileUpload = (e) => {
  var file = e.target.files[0];

  var formData = new FormData();
  formData.append("name", "Jenn");

  // HTML file input, chosen by user
  formData.append("file", file );

  // If you want to use any header
  var myHeaders = new Headers();
  var myInit = { method: 'POST',
               headers: myHeaders,
               mode: 'cors',
               cache: 'default' };

  fetch('http://127.0.0.1:9000/api/get_file/',myInit)
    .then(function(response) {
      return response.json();
    })
   .then(function(responseJson) {
     // POST succeeded...
     console.log('Upload succeeded')
   })
   .catch(function (err) {
     // POST failed...
     console.log('Upload failed:', err)
   });
};