使用 React 上传多张图片 [英] Uploading multiple images with React

问题描述

我想先上传多张图片，先预览，然后提交发送.我遇到过这个:TypeError:无法读取 null 的属性文件".它也只允许我上传一张图片.

• 我创建了 files: [] 作为在提交前安装图像以供审核的方式.
• 尝试创建一个接口 files: File[] = file 然后将其声明为 state 但得到一个不同的错误，即 file 在类型 {} 上不存在

import * as React from "react"class ImageUpload 扩展 React.Component {状态: {文件:[]}fileSelectedHandler = (file: any) =>{让 addedFiles = this.state.files.concat(file)this.setState({ files: addedFiles })console.log("上传文件" + file.name)}使成为() {返回 (<表格 ><div><h2>上传图片</h2>

<h3>图像</h3><input type="file" onChange={this.fileSelectedHandler}/></表单>)}}导出默认图片上传

我希望它允许我选择多个图像并将它们存储在数组中，然后再将它们作为批处理发送出去.这甚至是正确的方法吗?非常感谢任何反馈.

解决方案

1. 为了修复错误TypeError: Cannot read property 'files' of null. 你需要改变state声明

state = {文件:[]}

2. 如果您想有机会选择多个文件，您可以使用 multiple 选项

或者，如果您想一张一张地选择图像，您的实现应该可以工作，只需修复 state 声明并使用 e.target.files 来获取所选文件

class ImageUpload extends React.Component {状态 = {文件:[]}fileSelectedHandler = (e) =>{this.setState({ 文件: [...this.state.files, ...e.target.files] })}使成为() {返回 (<表格><div><h2>上传图片</h2></div><h3>图像</h3><input type="file" multiple onChange={this.fileSelectedHandler}/></表单>)}}ReactDOM.render(, 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>

I would like to upload multiple images first by previewing them then submitting to send them off. I have encountered this: TypeError: Cannot read property 'files' of null. It also only lets me upload just one image.

• I have created files: [] as means to mount the images for review before submitting.
• Tried creating an interface files: File[] = file then declaring it in state but get a different error that 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

I expect it to allow me to select multiple images and store them in the array before sending them off as a batch. Is this even the right way to do it? Any feedback is greatly appreciated.

解决方案

1. In order to fix the error TypeError: Cannot read property 'files' of null. you need to change the state declaration

state = {
   files: []
}

2. If you want to have the opportunity to select multiple files you can use multiple option

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

Or if you want to select image one by one, your implementation should work, just fix the state declaration and use e.target.files to get selected file

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>

这篇关于使用 React 上传多张图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！