reactjs - 将图像文件上传到 Mongodb 会创建一个空项目。反应 JS

Question

我目前正在使用 mongodb 数据库在 React JS 中开发一个 Web 应用程序来上传数据。我正在尝试将图像文件上传到数据库，但项目显示为空。我将如何解决这个问题？

上传数据的后端代码

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

const multer  = require('multer');
const GridFsStorage = require('multer-gridfs-storage');
const url = "mongodb://localhost:27017/StudyAppDB";
const storage = new GridFsStorage({ url });
const upload = multer({ storage });

const app = express();

app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());

mongoose.connect("mongodb://localhost:27017/StudyAppDB", {useNewUrlParser: true, useUnifiedTopology: true});



const imageSchema = {
  key: String,
  file: {
    name: String,
    lastModified: Number,
    lastModifiedDate: String,
    size: Number,
    type: String,
    webkitRelativePath: String,
  },
  filename: String,
}

const Images = mongoose.model("Images", imageSchema);

app.post('/uploadfile', upload.single('avatar'), (req, res) => { 
 
  const newImages = new Images(
    req.body.data
  )

  newImages.save(function (err) {
    if (!err) {
      res.send("saved");
    } else {
      res.send(err);
    }
  });
})

app.listen(5000, function (req, res) {
  console.log("listening");
})

采集数据的前端代码：fileUploadHandler 是上传数据到数据库的函数。

    import React, {useState} from 'react';
            import './Feed.css';
            import axios from 'axios';
            
            
            const multer  = require('multer');
            const GridFsStorage = require('multer-gridfs-storage');
            const url = "mongodb://localhost:27017/StudyAppDB";
            // Create a storage object with a given configuration
            const storage = new GridFsStorage({ url });
             
            // Set multer storage engine to the newly created object
            const upload = multer({ storage });
            
            export default function PostForm(props) {
            const [selectedFile, setSelectedFile] = useState(null)

function fileSelectedHandler(event) {
        setSelectedFile(event.target.files[0])
        
    }
  
        function fileUploadHandler(){
                    
             
                // Create an object of formData 
                const formData = new FormData(); 
                
                // Update the formData object 
                formData.append( 
                    "myFile", 
                    selectedFile, 
                    selectedFile.name 
                ); 
                
        
                axios.post("uploadfile", upload.single('avatar'), {data: formData}) 
                .then(function (response) {
                    //after submitting go to calendar page or whatever
                    })
                    .catch(function (error) {
                    console.log(error);
                    });
                
                  
            }
    return (
            <div className="post-form">
                <form onSubmit={handleSubmit} style={{width: '99%'}}>
                    Category:
                    
                    <div>
                        <select style={{width: '15%', padding: '0.2%', marginTop: '1%'}} value={category} onChange={(e) => setCategory(e.target.value)}>
                        {props.categories.map((category, index) =>
                            <option key={category} value={category}>{category}</option>
                        )}
                        </select>  
                    </div>
                    <br/>
                            
                        
                        <div style={{textAlign:'center'}}><textarea className='newContentText' value={content} onChange={e => setContent(e.target.value)}/> </div>
    
                        <input type="file" onChange={fileSelectedHandler}/>
                        <button onClick={fileUploadHandler}>Upload</button>
    
                        <button className="postButton">Post</button>
                 
                </form>
            </div>
        )
        
    }

标签： reactjsmongodbfileaxios