用React上传多张图片

小编典典

用React上传多张图片

reactjs

我想先上传多张图片，然后预览然后提交以发送出去。我遇到了这个：TypeError: Cannot read property 'files' of null。它还只允许我上传一张图像。

我创建files: []了一种在提交之前安装图像以供审阅的方法。
尝试创建一个接口，files: File[] = file然后将其声明为状态，但得到一个不同的错误file does not exist on type {}

    import * as React from "react"

    class ImageUpload extends React.Component {
      state: {
        files: []
      }

      fileSelectedHandler = (file: any) => {
        let addedFiles = this.state.files.concat(file)
        this.setState({ files: addedFiles })
        console.log("upload file " + file.name)
      }

      render() {
        return (
          < form >
            <div>
              <h2>Upload images</h2>
            </div>
            <h3>Images</h3>
            <input type="file" onChange={this.fileSelectedHandler} />
          </form>
        )
      }
    }

    export default ImageUpload

我希望它可以让我选择多个图像并将它们存储在数组中，然后再批量发送。这是正确的方法吗？任何反馈，不胜感激。

阅读 431

2020-07-22

共1个答案

小编典典

为了纠正错误，TypeError: Cannot read property 'files' of null.您需要更改state声明

state = {
files: []
}
如果您希望有机会选择多个文件，可以使用multiple选项

或者，如果您想要一张一张地选择图片，则您的实现应该可以正常工作，只需修正state声明并用于e.target.files获取选定的文件

    class ImageUpload extends React.Component {

      state = {

        files: []

      }



      fileSelectedHandler = (e) => {

        this.setState({ files: [...this.state.files, ...e.target.files] })

      }



      render() {

        return (

          <form>

            <div><h2>Upload images</h2></div>

            <h3>Images</h3>

            <input type="file" multiple onChange={this.fileSelectedHandler} />

          </form>

        )

      }

    }





    ReactDOM.render(<ImageUpload />, document.getElementById('app'))


    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

    <div id="app"></div>

2020-07-22