使用React上传文件并在网页中显示它们

Question

我正在尝试使用React上传txt文件，并在用户面前显示这些文件或文件名，授予他更改文件或删除文件的权限。这是我的：

 import React from "react";

class Browse extends React.Component
{

state =  {selectedFile:[] , textFile: []};

//fileChangedHandler  Method
fileChangedHandler =event => {        
 for(var i=0;i<event.target.files.length;i++){         
       this.state.fileees =event.target.files;
       this.setState({selectedFile: event.target.files[i]})

    this.setState((state) => {
        const textFile=[...state.textFile,state.selectedFile.name];
        return {
          textFile,
        };
    });

  }  //for
  } //fileChangedHandler

 render(){
    return(
        <div className="Browse">
                <label for="myfile">Insert DNA Files:</label>
                <input type="file" onChange={this.fileChangedHandler} id="myfile" name="myfile" multiple/>                  
                <div>
                  {this.state.selectedFile.name}
                </div>
        </div>
    );
}

} //class


export default Browse;

如果我上传一个文件，它的效果很好，我可以看到文件名，但是如果我上传多个文件，它就不起作用。我需要这个问题的帮助，为什么如果我上传多个文件，则无法在用户的Web前端显示它们

谢谢。

Answer 1

嗨，请检查此示例。我在这里上传了多个文件，并在页面中显示了文件名。

import React from "react";

export default class FIleUploadExample extends React.Component {

    state = {
        files: []
    };

    fileUpload = (e) => {
        this.setState({files: [...e.target.files]});
    };

    render() {
        return (
            <div>
                <span>File Upload</span>
                <input type="file" multiple="multiple" id="file" onChange={this.fileUpload}/>
                <ul>
                    {
                        this.state.files.map((file, i) => <li key={i}>{file.name}</li>)
                    }
                </ul>
            </div>
        );
    }
}