处理上传多个上传反应的状态

Question

我想在上传 1 张图片后添加数据

const [file, setFile] = useState(null);

const handleUpload = (e) => {
    setFile(e.target.files);
};

<input
  type="file"
  onChange={(e) => handleUpload(e)}
  ref={fileInputRef}
  multiple
/>

如果我一次选择 2 个或更多文件，这是可行的。 但是我想在选择 1 张图片后处理。用户将使用相同的输入进行上传。

我尝试使用以下方法并创建错误 TypeError: file is not iterable

const handleUpload = (e) => {
    setFile([...files, e.target.files]);
};

或

const handleUpload = (e) => {
    let filesArray = file;
    if (file) {
      for (var i = 0; i < file.length; i++) {
        filesArray.push(e.target.files[i]);
      }
    }
    setFile(filesArray);
};

你们有什么办法吗？

Answer 1

您应该首先在useState 中将file 的默认值设置为数组，然后在使用set 方法时需要正确使用spread (...) 运算符。这将解决您的错误TypeError: file is not iterable

以下是您需要执行的更改。

export default function InputComponent() {
  const [file, setFile] = React.useState([]);

  const handleUpload = (e) => {
    setFile([...file, ...e.target.files]);
  };
  return (
    <div>
      <input type="file" onChange={(e) => handleUpload(e)} multiple /><br/><br/>
      <textarea value={file}/>
    </div>
  );
}