Question

我是不熟悉上传图像的新手。我在上传图像的地方输入了内容：

<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文件有关。

Answer 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);
        });
      }

Answer 2

在您的组件内部，我们使用In [114]: df2['data'] = df2.data.str.split(' ',expand=True).replace('\[|\]','',regex=True).astype(int).values.tolist() In [115]: df2['data'] = [np.array(i) for i in df2.data] In [116]: df2.loc[0,'data'] Out[116]: array([2, 5, 7])将图片设置为我们的状态，然后我们可以从同一组件内的另一个处理程序访问此状态，而不必尝试从UI再次获取同一图片。

fileSelectHandler

Answer 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);
    });
  }

Answer 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);
}

图片上传反应输入形式：无法读取属性'0

4 个答案: