在React JS中上传后更改文件(重新上传文件) [英] Change the file after uploading in React JS (Reupload files)

问题描述

这里是我的代码，用于在React JS中上传多个文件，并向用户展示这些文件.我在文件名的附近有两个按钮:第一个按钮名称:"Delete"(当用户单击它时，所有行都消失了，这很好).第二个按钮名称:更改"，当用户单击它时，他可以上载另一个文件，新文件必须替换旧文件.我该怎么办?

Here my code to upload multi files in React JS and show these files front of the user. .I have two buttons near of the name of the files : first button name:"Delete" when the user click it all the row disappear,and that works fine. second button name: "Change" when the user click it he can upload another file, and the new file must replace the old . How can I do that ?

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

export default class Browse extends React.Component {
  state = {
    files: []
  };

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

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

  Delete(name) {
    this.setState((prevState) => ({
      files: prevState.files.filter((file) => file.name !== name)
    }));
    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}>
              - <th style={{ textAlign: 'left' }}>{file.name} : </th>
              <th>
                <button type='file' onClick={() => this.Change(i)}>
                  Change
                </button>
              </th>
              <th>
                <button onClick={() => this.Delete(file.name)}>Delete</button>
              </th>
            </tr>
          ))}
        </table>
      </div>
    );
  }
}

推荐答案

请检查以下示例:

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

export default class Browse extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            files: [],
            changedFileIndex: -1
        };
        this.fileUploaderRef = React.createRef();
    }

    fileUpload = (e) => {
        let changedFile = e.target.files[0];
        let uploadedFiles = e.target.files;

        if (this.state.changedFileIndex >= 0) {
            this.setState(prevState => {
                const list = [];
                prevState.files.map((file, i) => {
                    if (i === prevState.changedFileIndex)
                        list.push(changedFile);
                    else
                        list.push(file);
                });
                return {
                    files: list,
                    changedFileIndex: -1,
                };
            });
        } else if (this.state.files.length > 0) {
            this.setState(prevState => {
                return {files: [...prevState.files, ...uploadedFiles]}
            });
        } else
            this.setState({files: [...e.target.files]});
    };

    Change(index, file) {
        console.log("Change Function");
        this.setState({changedFileIndex: index});
        this.fileUploaderRef.current.click();
    }

    Delete(name) {
        this.setState(prevState => {
            const list = [];
            prevState.files.map((file, i) => {
                if (file.name !== name) {
                    list.push(file);
                }
            });
            return {
                files: list,
                changedFileIndex: -1,
            };
        });
    }

    render() {
        return (
            <div className="Browse">
                <label>Insert DNA Files:</label>
                <input type="file" multiple="multiple" id="file" ref={this.fileUploaderRef} onChange={this.fileUpload}/>
                <table className="filesName">
                    <tbody>
                    {
                        this.state.files.map((file, i) =>
                            <tr key={i}>
                                <th style={{textAlign: "left"}}>{file.name} :</th>
                                <th>
                                    <button type="file" onClick={() => this.Change(i)}>Change</button>
                                </th>
                                <th>
                                    <button onClick={() => this.Delete(file.name)}>Delete</button>
                                </th>
                            </tr>
                        )
                    }
                    </tbody>
                </table>
            </div>
        );
    }
}

这篇关于在React JS中上传后更改文件(重新上传文件)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！