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

Question

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

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

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

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

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

我尝试使用下面的方法并创建了错误类型错误：文件不可迭代

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 中将文件的默认值设置为数组，然后在使用 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>
  );
}

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

handle state for uploading multiple upload react

html

javascript

file-upload

reactjs