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

Question

我正在开发一个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");});

Answer 1

我会这样做。我会创建一个名为 的文件夹，例如 。它包含开头的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的路径应存储在数据库中