在reatjs中通过多部分/表单数据usig请求保证上传文件

问题描述

我正在尝试在输入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

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

解决方法

您只需要创建一个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)
   });
};