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

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 =&nbsp; function(req, res) {&nbsp; const multer = require("multer");&nbsp; const fs = require("fs");&nbsp; let user;&nbsp; const storage = multer.diskStorage({&nbsp; &nbsp; destination: (req, file, cb) => {&nbsp; &nbsp; &nbsp; user = "5da4ksfgd4ds"; //this should be unique, this could be the _id that is stored in the mongo database&nbsp; &nbsp; &nbsp; const dir = `./static/uploads/${user}/article`;&nbsp; &nbsp; &nbsp; if (!fs.existsSync(dir)) {&nbsp; //checks if directory exist, if not it will create one&nbsp; &nbsp; &nbsp; &nbsp; fs.mkdirSync(dir, { recursive: true });&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; return cb(null, dir);&nbsp; &nbsp; },&nbsp; &nbsp; filename: (req, file, cb) => {&nbsp; &nbsp; &nbsp; let name = Date.now();&nbsp; &nbsp; &nbsp; cb(null, `${name}.jpeg`);&nbsp; //&nbsp; &nbsp; }&nbsp; });&nbsp; const upload = multer({ storage });&nbsp; return upload;}现在我们已经完成了multer中间件，现在你可以使用它了：首先导入它：const articleUploadMiddleware = require("path/to/multer/middleware");router.post('/', articleUploadMiddleware().single("image") ,(req, res, next) => {&nbsp; &nbsp;//some code....&nbsp; &nbsp;let filePath = req.file.path; //save this path into your database&nbsp; &nbsp;//more code}在您的客户端上，我猜您使用的是axios，重要的是将标头设置为并像这样发送您的请求：multipart/form-data例如，您需要一个事件侦听器来监视触发函数的文件输入的更改<input typ="file" />uploadImguploadImg(e){&nbsp; &nbsp;const articleImg = e.target.files[0];&nbsp; &nbsp;let formData = new FormData();&nbsp; &nbsp;formData.append("image", articleImg);&nbsp; &nbsp;axios({&nbsp; &nbsp; &nbsp; method: "POST",&nbsp; &nbsp; &nbsp; url: "yourUrl",&nbsp; &nbsp; &nbsp; data: formData,&nbsp; &nbsp; &nbsp; headers: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"Content-Type": "multipart/form-data"&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;})}此时，如果一切成功，您的img应存储在 目录中 。大数字是时间戳。您可以根据需要对其进行命名。./static/uploads/5da4ksfgd4ds/article/12412334234.jpg并且此img的路径应存储在数据库中