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

【问题标题】：Upload files and show them in web page using React使用 React 上传文件并在网页中显示它们
【发布时间】：2020-08-08 06:29:33
【问题描述】：

我正在尝试使用 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;

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

谢谢。

【问题讨论】：

标签： reactjs file web show uploading

【解决方案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>
        );
    }
}

【讨论】：

它的工作非常好，谢谢！ ------------- 但是当我单击 Inspect 并转到 Component 以查看状态时，文件看到 empty 。平时这样吗？
@BhaaRizik，不客气，兄弟。 Components 选项卡是 React 调试工具。我没有关于它的详细知识。可能是该工具的错误，但文件对象在您的代码中可用。您可以对这些文件执行进一步的操作。
好的，谢谢。我的目的是将这些文件发送到用 c++ 编写的服务器并在那里使用它们。
你能看到我对其他两个按钮的评论吗？ .谢谢
@BhaaRizik，我可以看到您的评论，但您应该为它创建新问题。您正在回答的地方写问题。您能否提出单独的问题并将链接提供给我，以便我为您准备示例？

【解决方案2】：

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

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

【讨论】：