图片上传反应输入表单：无法读取属性'0答案

【问题标题】：image uploading react input form: Cannot read property '0图片上传反应输入表单：无法读取属性'0
【发布时间】：2018-08-07 13:14:59
【问题描述】：

我是上传图像的新手。我在上传图片的地方有我的输入：

<input className="your-upload-class" type="file" ref ="image"  onChange={this.fileSelectHandler}/> 
<button onClick={this.fileUploadHandler}>upload</button>

这是我的功能：

  fileSelectHandler = event => {
     console.log(event.target.files[0])
    }
  fileUploadHandler = event => {

    var files = event.target.files[0];

      S3.upload({
        files:files,
         path:"subfolder"
       },function(e,r){
         console.log(r);
        });
      }

当我选择图像时，我的 onChange 函数会在控制台中显示我的文件信息，如下所示：File(16862) {name:ect...

当我点击上传时，我得到这个错误：

无法读取未定义的属性“0”

我不知道为什么我在上传时收到该错误，但在我选择图片时会显示该信息。如何获取变量中的文件信息以便保存？

另外我正在使用 Lepozepo/S3 并且已经在我的配置文件中设置了我的所有凭据，但我认为我的问题与我如何设置 var 文件有关。

【问题讨论】：

var files = event.target.files[0] in fileUploadHandler 错误，事件在按钮中触发，所以这里没有文件，
您需要将文件存储到临时变量或状态中，然后您可以使用它来上传文件。
所提供的答案很幸运

标签： javascript reactjs

【解决方案1】：

我不知道反应很好，但逻辑是正确的，声明一个变量并在输入更改事件时将文件分配给该变量，然后使用该变量上传

上传

 file;
  fileSelectHandler = event => {
     this.file = event.target.files[0])
    }
  fileUploadHandler = event => {

    var files = this.file;

      S3.upload({
        files:files,
         path:"subfolder"
       },function(e,r){
         console.log(r);
        });
      }

【讨论】：

【解决方案2】：

在您的组件中，我们使用fileSelectHandler 将图像设置为我们的状态，然后我们可以从同一组件中的另一个处理程序访问此状态，而不是尝试从 UI 中再次获取相同的图像。

class MyComponent extends React.Component {
  state = {
    image: null
  }
  fileSelectHandler = event => {
    this.setState = {
      image: event.target.files[0]
    }
  }
  fileUploadHandler = event => {
    const { image } = this.state

    S3.upload({
      files: image,
      path: "subfolder"
    }, function (e, r) {
      console.log(r);
    });
  }

  render() {
    return (
      // Stuff
  );
  }
}

【讨论】：

【解决方案3】：

您的方法中的问题是您正在编写两个不同的函数，并且考虑到 event 对两者来说都是相同的，但事实并非如此。

fileSelectHandler 函数有一个包含文件 obj 但不包含 fileUploadHandler 的事件，因为它是一个按钮的 onclick。

所以两个函数中的这两个事件是不同的。

所以你应该做的是：

 let file;
 fileSelectHandler = event => {
 file = event.target.files[0])
 }

 fileUploadHandler = event => {

  S3.upload({
    files:file,
     path:"subfolder"
   },function(e,r){
     console.log(r);
    });
  }

【讨论】：

【解决方案4】：

<form onSubmit={this.fileUploadHandler}>
  <input className="your-upload-class" type="file" ref="image" onChange={this.fileSelectHandler} /> 
  <button type="submit">Upload</button>
</form>

event.target是按钮的，这里我们只是提交表单并获取状态信息。

fileSelectHandler = event => {
  this.setState({ file: event.target.files[0] });
}

fileUploadHandler = event => {
  console.log(this.state.file);
}

【讨论】：