如何在 React 中上传多张图片 (nextjs)

Question

我正在尝试从 <input onChange={onChange} type='file' name='file' multiple/> 在 React (nextjs) 中上传多张图片但是哪种方式更合适呢？几个小时的谷歌搜索对我没有帮助这是我的方法（那个ofc不行，不然我就不用写了）：

我使用 useState 挂钩存储图像的 src：

const [imgsSrc, setImgsSrc] = useState([])

这是我的“更改处理程序输入”：

const onChange = (changeEvent: any) => {
    for (let file of changeEvent.target.files) {
        setTimeout(() => {
            const reader = new FileReader()
            reader.readAsDataURL(file)
            reader.onload = () => { setImgsSrc([...imgsSrc, reader.result]) }
            reader.onerror = () => { console.log(reader.error)}
        }, 1000)
            
    }
}

我的input再来一次

<input onChange={onChange} type='file' name='file' multiple/>

以及我尝试向用户显示图像的方式

{ imgsSrc.map((link) => { <img src={link}/> }) }

但它没有显示任何内容，所以我有几个问题，我的神经细胞很乐意得到答案

为什么它不起作用
“将图像保存到根应用程序目录中的 public 文件夹”是否是保存图像的好方法
我可以远程存储 base64 编码 URL 并在每次请求时获取它、解码它并获取图像吗

请...

Answer 1

将图像保存在 public 目录中不是一个好方法，您应该尝试云计算应用程序，例如 AWS、Google 或 Cloudinary。但我更喜欢使用 Cloudinary，因为你可以在一个免费帐户中存储大约 10GB 的图像，而且它很容易与 React 应用程序集成。 它是如何工作的？

1- save your image in Cloudinary through API request then Cloudinary returns the link of the image in response.

2-store the link of the image inside the database

教程 => upload image cloudinary and react

Answer 2

您基本上有几个错误导致您的代码无法显示任何内容：

 function App() {
  const [imgsSrc, setImgsSrc] = useState([]);
  const onChange = (e) => {
    for (const file of e.target.files) {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        setImgsSrc((imgs) => [...imgs, reader.result]);
      };
      reader.onerror = () => {
        console.log(reader.error);
      };
    }
  };
  console.log(imgsSrc, imgsSrc.length);
  return (
    <div>
      <input onChange={onChange} type="file" name="file" multiple />
      {imgsSrc.map((link) => (
        <img src={link} />
      ))}
    </div>
  );
}

由于文件 reader 是异步的，你需要告诉 React 使用最新的状态来更新状态，否则你会有错误，因为 setState 也是异步的，并且循环命令是批处理的并覆盖另一个。

您没有任何图像输出是因为您没有从 .map.

返回任何内容

您可以查看固定版本：https://stackblitz.com/edit/react-pgtpnu?file=src%2FApp.js

如果你使用 NextJS 并且部署在无服务器环境中，则无法将文件保存在服务器上，你需要使用云服务，你可以使用 firestore 来保存 base64 字符串，或者更好的是，上传 blob直接到cloudinary，通过multer中间件nextJS serverless functions让你几行就可以写出这样的功能

如何在 React 中上传多张图片 (nextjs)

How to upload multiple images in react (nextjs)

javascript

typescript

reactjs

next.js