时间戳

首页 > 解决方案 > 图片上传反应输入表单：无法读取属性'0

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

问题描述

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

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

当我单击 uplaod 时，我收到此错误：

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

我不确定为什么在上传时会出现该错误，但在选择图像时会显示信息。如何在变量中获取文件信息以便保存？

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

标签： javascriptreactjs

解决方案

在您的组件内部，我们使用 将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
  );
  }
}

推荐阅读