使用 React 上传多张图片

IT技术 reactjs typescript
2021-05-23 16:27:51

我想先上传多张图片，先预览，然后提交发送。我遇到过这样的：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

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

3个回答
  1. 为了修复错误，TypeError: Cannot read property 'files' of null.您需要更改state声明
state = {
   files: []
}
  1. 如果您想有机会选择多个文件，您可以使用multiple选项
<input type="file" multiple onChange={this.fileSelectedHandler} />

或者，如果您想一张一张地选择图像，您的实现应该可以工作，只需修复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>

处理表单 初始数据：

const initialProducts = {
name: "",   
featured_image: "", //for single image
slider_images: [], // (array of strings)   
};

使用状态

const [products, setProducts] = useState(initialProducts);

功能：处理输入字段

const handleInput = (e) => {
let updateValues = { ...products };
updateValues[e.target.name] = e.target.value;
setProducts(updateValues);
console.log("Update input values", updateValues);
};

功能：处理多张图片

 const handleSliderImages = (e) => {
  if (e.target.files) {
  setProducts({ ...products, slider_images: [...e.target.files] });
  }
  console.log("Update slider images", products);
};

输入字段的 FormGroup

<FormGroup className="my-3">
  <Label for="name">Name</Label>
   <Field
    name="name"
    id="name"
    onChange={handleInput}
    value={products.name}
   />
</FormGroup>

单个图像的 FormGroup

 <FormGroup className="my-3">
  <Label for="featured_image">Featured Image</Label>
  <CustomInput
   type="file"
   id="featured_image"
   name="featured_image"
   onChange={handleInput}
   value={products.featured_image}                  
  />               
 </FormGroup>

多个图像的表单组

<FormGroup className="my-3">
 <Label for="slider_images">Slider Images</Label>
 <CustomInput
 multiple
 type="file"
 id="slider_images"
 name="slider_images"
 onChange={handleSliderImages}
 />                
</FormGroup>

您可以通过多个输入字段来解决此问题。您可以使用其唯一的“ID”跟踪用于上传文件的输入字段。请看一下我分享的代码。

输入栏

onChange 处理程序

基于 id 的文件处理程序

其它你可能感兴趣的问题
上一篇如何在 React Router 4 中实现动态路由？ 下一篇文件太大而无法在 Tinkercad 中打开。我怎样才能缩小它？