如何解决我需要授予管理员权限以使用 react 和 nextjs 为电子商务网站上传图片
我正在使用 NextJs 创建一个电子商务网站。我想授予管理员权限,管理员可以上传产品图片,该图片稍后将与产品一起显示在仪表板上。
我的问题是如何实现这一目标?我可以将图像位置与其他产品详细信息一起存储在 db 中,但是图像呢?上传图片的存储位置,以便在页面加载时自动显示。
一种方法是在提供应用程序的文件系统中加载图像,但随后我必须一次又一次地部署应用程序,这似乎不切实际。此外,我认为没有办法将图像直接加载到公共文件夹中。
期待答案。
谢谢
解决方法
您基本上可以像在 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 以获得更详细的说明。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。