如何解决我如何在React中使用GridFS从MongoDB数据库中获取图像?
我正在一个项目中,其中已使用filepond和GridFS将图像上传到MongoDB数据库。
我对于如何找回图像并将其显示在简单的HTML元素中一无所知。
据我所知,似乎他们正在使用multer来上传文件,同时将Filepond用作前端。
以下是Filepond实现的代码:
<div className={styles.uploadBox}>
{/* Pass FilePond properties as attributes */}
<FilePond
ref={(ref) => (this.pond = ref)}
files={this.state.files}
allowMultiple={true}
maxFiles={5}
name={"singlesong"}
allowReorder={true}
instantUpload={false}
labelIdle={
'Drag & Drop your Songs or <span class="filepond--label-action"> browse </span>'
}
server={"/user/uploadsong"}
oninit={() => this.handleInit()}
onupdatefiles={(fileItems) => {
this.setState({
files: fileItems.map((fileItem) => fileItem.file),});
}}
onprocessfile={(error,res) => {
this.handleOnUpload(error,res);
}}
></FilePond>
{this.state.message ? <Message message={this.state.message} /> : null}
</div>
关于multer后端,这是代码:
const storage = new GridFsstorage({
url: keys.MONGODB_URI,file: (req,file) => {
return new Promise((resolve,reject) => {
crypto.randomBytes(16,(err,buf) => {
if (err) {
return reject(err);
}
const filename = buf.toString("hex") + path.extname(file.originalname);
const fileInfo = {
filename: filename,bucketName: "songs",};
resolve(fileInfo);
});
});
},});
const upload = multer({
storage,});
首先,我不太确定Filepond如何与后端代码进行通信。
此外,如前所述,我也不知道如何从数据库中检索任何图像。
非常感谢任何指针。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。