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

【问题标题】：i need to give admin rights to upload images for an ecommerce website using react and nextjs我需要授予管理员权限以使用 react 和 nextjs 为电子商务网站上传图片
【发布时间】：2021-02-16 04:55:17
【问题描述】：

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

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

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

期待答案。

谢谢

【问题讨论】：

标签： javascript reactjs next.js e-commerce image-upload

【解决方案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接口追加图片，使用XMLHttpRequest上传文件到服务器。
一些简单的 UI 逻辑来向用户显示预览。

查看此tutorial 以获得更详细的说明。

【讨论】：