反应上传多个文件答案

【问题标题】：react upload multiple files反应上传多个文件
【发布时间】：2020-02-11 21:38:16
【问题描述】：

我正在尝试让我的表单上传多个文件，但是一旦我上传了第一个文件，我就没有机会加载第二个文件了。知道我做错了什么吗？

这是我的上传组件：

import React, { Component } from 'react'
import * as RB from 'react-bootstrap'

import Button from 'components/Button/Button'

class uploadMob extends Component {
    constructor(props) {
        super(props)
        this.state = {
            files: [],
        }
    }

    onFilesAdded = (e) => {
        const filesArray = this.state.files
        filesArray.push(e.target.files[0])
        this.setState({ files: filesArray })

        this.uploadFiles()
    }

    async uploadFiles() {
        this.state.files.forEach((file) => {
            this.sendRequest(file)
        })
    }

    sendRequest(file) {
        const { pdfUploadToState } = this.props
        pdfUploadToState(file)
    }

    render() {
        const files = this.state.files
        return (
            <RB.Form.Group>
                <div className="upload-btn-wrapper">
                    <div className="Files">
                        {files.map((file, key) => {
                            return (
                                <div key={key} className="Row">
                                    <span className="Filename">
                                        {file.name}
                                    </span>
                                </div>
                            )
                        })}
                    </div>
                    <Button size="sm" variant="light">
                        Dateien hochladen
                    </Button>

                    <input
                        type="file"
                        name="files"
                        id="files"
                        onChange={(e) => {
                            this.onFilesAdded(e)
                        }}
                        multiple
                    />
                </div>
            </RB.Form.Group>
        )
    }
}

export default uploadMob

第一个文件已完美上传，但如前所述，尝试上传第二个文件时按钮没有响应。

感谢您的帮助！

【问题讨论】：

您必须使用键盘上的控制键使用多项选择上传多个文件。
感谢您的回复 niks。问题在于，选择多个文件时，它仅加载第一个。无论如何，如果没有输入的“多个”属性，第二次点击时按钮不起作用..
这可能是因为：filesArray.push(e.target.files[0])。您只推送数组中的第 0 个元素。
我也是这么想的，但因为这是我的手机版本，我想实际一个一个地加载文件。无论如何，我尝试了所有变体来获取 e.target.files，但它们都没有奏效。我对这个很迷茫......

标签： javascript reactjs file-upload

【解决方案1】：

您的代码似乎是正确的，但是当您使用具有多个属性的输入类型文件时，您需要选择多个文件，然后点击上传按钮以逐个选择文件。

也替换

    filesArray.push(e.target.files[0])

与

    for (var i = 0; i < files.length; i++) 
    {
        filesArray.push(e.target.files[i]);
    }

逐个上传文件替换

     onFilesAdded = (e) => 
    {
      this.state.files.push(e.target.files[0])
      this.uploadFiles()
    }

希望对你有帮助

【讨论】：

感谢您的回复 Arunkumar。问题在于，选择多个文件时，它仅加载第一个。无论如何，没有输入的“多个”属性，第二次点击时按钮不起作用..我确实想一个一个地加载文件，因为这是我的移动版本，但我不知道出了什么问题在代码中。