时间戳

首页 > 解决方案 > 处理上传多个上传反应的状态

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

问题描述

我想在上传 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);
};

你们有什么解决办法吗？

标签： javascripthtmlreactjsfile-upload

解决方案

您应该首先将文件的默认值设置为您的数组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>
  );
}

推荐阅读