使用 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;

上传一个文件很好用，可以看到文件名，上传多个文件就不行了。我需要帮助解决这个问题， 为什么如果我上传了多个文件，我无法在用户的网页前端显示它们

谢谢。

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

Answer 2

我需要在文件名附近添加两个按钮：第一个按钮名称："Delete" 当用户单击它时，所有行都消失了。第二个按钮名称："Change" 当用户点击它时，他可以上传另一个文件，新的文件名必须替换旧的。我该怎么做？

import React from "react";
import '../index.css';
import './dna.css';



export default class Browse extends React.Component {

    state = {
        files: [],
       // changeButtons:[],
    //    deleteButtons:[]
    };

    fileUpload = (e) => {
        this.setState({files: [...e.target.files]});
       // this.setState({changeButtons:[<button>Change</button>]});
       // this.setState({deleteButtons:[<button onClick={(e)=>this.onDelete(id)}>Delete</button>]});
    };

        Change(id){
            console.log("Change Function");
        }

    Delete(id) {
        console.log("ssss")
        this.setState((prevState) => ({
          files: prevState.files.filter(files => files.id !== id),
        }))
        console.log(this.state.files.name);
      }

    render() {
        return (
            <div className="Browse">
               <label>Insert DNA Files:</label>
                <input type="file" multiple="multiple" id="file" onChange={this.fileUpload}/>
                <table className="filesName">

                    {

                        this.state.files.map((file, i) => <tr key={i}>
                                                            <td style={{textAlign:"left"}}>{file.name} : </td>
                                                            <td><button onClick={() => this.Change(i)}>Change</button></td>
                                                            <td><button onClick={() => this.Delete(i)}>Delete</button></td>
                                                          </tr>)
                    }

                </table>
            </div>
        );
    }
}

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

Upload files and show them in web page using React

file

uploading

show

web

reactjs