我需要授予管理员权限以使用 React 和 NextJS 为电子商务网站上传图片

Question

我正在使用 NextJs 创建一个电子商务网站。我想授予管理员权限，管理员可以在其中上传产品图片，该图片稍后将与产品一起显示在仪表板上。

我的问题是如何实现这个？？我可以将图像位置与其他产品详细信息一起存储在数据库中，但是图像呢？？在哪里存储这个上传的图像，以便它可以在页面加载时自动显示。

一种方法是在提供应用程序的文件系统中加载图像，但我将不得不一次又一次地部署应用程序，这似乎不切实际。另外我认为没有办法直接将图像加载到 public 文件夹。

期待答案。

谢谢

Answer 1

你基本上就像在 React 中那样做。创建一个组件来处理预览的显示以及上传到外部服务器。我创建了一个 codepen 供您在野外测试该组件。它包括：

import React from "react";

const ImageUpload = props => {
  const [currentFile, setFile] = React.useState();
  const [previewImage, setPreview] = React.useState();
  const [success, setSuccess] = React.useState(false);

  const selectFile = function (e) {
    setFile(e.target.files[0]);

    let reader = new FileReader();
    reader.onloadend = () => {
      setPreview(reader.result);
    };

    reader.readAsDataURL(e.target.files[0]);
  };

  const submit = function () {
    let fd = new FormData();

    fd.append("file", currentFile);

    let request = new XMLHttpRequest();

    request.onreadystatechange = function (state) {
      if (
        state.originalTarget.readyState === 4 &&
        state.originalTarget.status === 200
      ) {
        setSuccess(true);
      }
    };

    request.open(
      "POST",
      "https://us-central1-tutorial-e6ea7.cloudfunctions.net/fileUpload",
      true
    );
    request.send(fd);
  };

  return (
    <div>
      <h1>Upload an image</h1>
      <input type="file" accept="image/*" onChange={selectFile} />

      {previewImage && !success && (
        <div>
          <img className="preview" src={previewImage} alt="" />
        </div>
      )}

      {success && <div>Image successfully uploaded</div>}

      <button onClick={submit}>Upload</button>
    </div>
  );
};

export default ImageUpload;

一个 <img/> 元素，它接受文件并使用 FileReader api.
在 onChange 事件中呈现预览
一个 submit 函数，它使用 FormData interface to append the image and uses XMLHttpRequest 将文件上传到服务器。
向用户显示预览的一些简单 UI 逻辑。

查看此 tutorial 以获得更详细的解释。

我需要授予管理员权限以使用 React 和 NextJS 为电子商务网站上传图片

i need to give admin rights to upload images for an ecommerce website using react and nextjs

javascript

image-upload

e-commerce

reactjs

next.js