为了账号安全,请及时绑定邮箱和手机立即绑定

将文章的图像存储在蒙哥数据库中

将文章的图像存储在蒙哥数据库中

浮云间 2022-09-23 21:46:16

我正在开发一个MERN应用程序,有一个文章组件,其中包含一些文本字段和一个预览图像。我需要将此数据存储在蒙哥数据库中。我尝试过使用multer,但是加载图像时存在问题。当我使用 fetch 在我的路线上发布图像时,出现错误 404。如何正确发布此图像并从我的数据库中获取?我的代码中有一些片段:


文章组件的 JSX:


import React from 'react';

import axios from 'axios';


class Form extends React.Component {


  constructor(props) {

    super(props);

  }


  storeImg(ev) {

    ev.preventDefault();

    const file = document.getElementById('previewImageInput').files;

    const formData = new FormData();

    formData.append('img', file[0]);

    fetch("http://localhost:8080/images", { // returns an error 404

      method: "POST",

      body: formData

    })

      .then((res) => {

        console.log(res)

      })

      .then(() => {

        axios.get(`http://localhost:8080/api/images/${file[0].name}`)

          .then((res) => console.log(res.data));

      })

  }


  render() {   

    return (

      <div>

        <input

          id="imageFile"

          type="file"

        />

        <button onClick={this.storeImage}>Submit</button>

      </div>

    )

  }

}

图像路由


const express = require("express");

const bodyParser = require("body-parser");

const path = require("path");

const multer = require("multer");

const crypto = require('crypto');

const cors = require("cors");

const GridFsStorage = require("multer-gridfs-storage");

const Grid = require("gridfs-stream");


const app = express();

const mongoose = require('mongoose');

const router = require('express').Router();


const conn = mongoose.createConnection('mongodb://localhost/db-name');


let gfs;


conn.once("open", () => {

  gfs = Grid(conn.db, mongoose.mongo);

  gfs.collection("uploads");

  console.log("Connection Successful");

});


查看完整描述

1 回答

?
白衣染霜花

TA贡献1491条经验 获得超9个赞

我会这样做。我会创建一个名为 的文件夹,例如 。它包含开头的1个文件,称为multerMiddlewaresarticlePictureUpload.js


它看起来像这样:


module.exports =  function(req, res) {

  const multer = require("multer");

  const fs = require("fs");

  let user;



  const storage = multer.diskStorage({

    destination: (req, file, cb) => {

      user = "5da4ksfgd4ds"; //this should be unique, this could be the _id that is stored in the mongo database

      const dir = `./static/uploads/${user}/article`;

      if (!fs.existsSync(dir)) {  //checks if directory exist, if not it will create one

        fs.mkdirSync(dir, { recursive: true });

      }

      return cb(null, dir);

    },


    filename: (req, file, cb) => {

      let name = Date.now();

      cb(null, `${name}.jpeg`);  //

    }

  });

  const upload = multer({ storage });


  return upload;

}

现在我们已经完成了multer中间件,现在你可以使用它了:


首先导入它:


const articleUploadMiddleware = require("path/to/multer/middleware");


router.post('/', articleUploadMiddleware().single("image") ,(req, res, next) => {


   //some code....

   let filePath = req.file.path; //save this path into your database

   //more code


}

在您的客户端上,我猜您使用的是axios,重要的是将标头设置为并像这样发送您的请求:multipart/form-data


例如,您需要一个事件侦听器来监视触发函数的文件输入的更改<input typ="file" />uploadImg


uploadImg(e){

   const articleImg = e.target.files[0];

   let formData = new FormData();

   formData.append("image", articleImg);

   axios({

      method: "POST",

      url: "yourUrl",

      data: formData,

      headers: {

         "Content-Type": "multipart/form-data"

      }

   })

}

此时,如果一切成功,您的img应存储在 目录中 。大数字是时间戳。您可以根据需要对其进行命名。./static/uploads/5da4ksfgd4ds/article/12412334234.jpg


并且此img的路径应存储在数据库中


查看完整回答
反对 回复 2022-09-23
  • 1 回答
  • 0 关注
  • 8 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信