我无法将文件上传到数据库。维护我的文件结构对我来说很重要。这是我的文件结构： 服务器：服务器结构 在这种情况下最重要的苍蝇：
server.js：
const express = require('express');
const path = require('path');
const mongoose = require('mongoose');
const methodOverride = require('method-override');
const config = require('config');
const app = express();
// Bodyparser Middleware
app.use(express.json());
app.use(methodOverride('_method'));
// DB Config
const db = config.get('mongoURI');
// // Connect to Mongo
mongoose
.connect(db, {
useNewUrlParser: true,
useCreateIndex: true,
useUnifiedTopology: true
}) // Adding new mongo url parser
.then(() => console.log('MongoDB Connected...'))
.catch(err => console.log(err));
// Use Routes
app.use('/api/items', require('./routes/api/items'));
app.use('/api/users', require('./routes/api/users'));
app.use('/api/auth', require('./routes/api/auth'));
app.use('/api/files', require('./routes/api/files'));
// Serve static assets if in production
if (process.env.NODE_ENV === 'production') {
// Set static folder
app.use(express.static('client/build'));
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
});
}
const port = process.env.PORT || 5000;
app.listen(port, () => console.log(`Server started on port ${port}`));
模型/文件.js
const mongoose = require('mongoose');
const Schema = mongoose.Schema;
// Create Schema
const FileSchema = new Schema({
path: {
type: String,
required: true
}
});
module.exports = File = mongoose.model('file', FileSchema);
routes/api/files.js（这里的post方法是最大的问题）
const router = require('express').Router();
const multer = require('multer');
const crypto = require('crypto');
const GridFsStorage = require('multer-gridfs-storage');
const auth = require('../../middleware/auth');
const mongoose = require('mongoose');
const Grid = require('gridfs-stream');
const conn = mongoose.connection;
Grid.mongo = mongoose.mongo;
// Init gfs
let gfs;
conn.once('open', () => {
// Init stream
gfs = Grid(conn.db);
gfs.collection('files');
});
// // Create storage engine
const storage = new GridFsStorage({
db: conn,
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: 'files'
};
resolve(fileInfo);
});
});
}
});
const upload = multer({ storage });
// File Model
const File = require('../../models/File');
// @route GET /
// @desc Loads form
router.get('/', (req, res) => {
gfs.files.find().toArray((err, files) => {
// Check if files
if (!files || files.length === 0) {
// res.render('index', { files: false });
} else {
files.map(file => {
if (
file.contentType === 'image/jpeg' ||
file.contentType === 'image/png'
) {
file.isImage = true;
} else {
file.isImage = false;
}
});
// res.render('index', { files: files });
}
});
});
// @route POST /upload
// @desc Uploads file to DB
router.post('/', upload.single('file'), (req, res) => {
const newFile = new File({
path: req.body.name
});
newFile.save();
// newFile.save().then(file => res.json({ file: req.file }));
});
// @route GET /files
// @desc Display all files in JSON
router.get('/', (req, res) => {
gfs.files.find().toArray((err, files) => {
// Check if files
if (!files || files.length === 0) {
return res.status(404).json({
err: 'No files exist'
});
}
// Files exist
return res.json(files);
});
});
// @route GET /files/:filename
// @desc Display single file object
router.get('/:filename', (req, res) => {
gfs.files.findOne({ filename: req.params.filename }, (err, file) => {
// Check if file
if (!file || file.length === 0) {
return res.status(404).json({
err: 'No file exists'
});
}
// File exists
return res.json(file);
});
});
// @route GET /image/:filename
// @desc Display Image
router.get('image/:filename', (req, res) => {
gfs.files.findOne({ filename: req.params.filename }, (err, file) => {
// Check if file
if (!file || file.length === 0) {
return res.status(404).json({
err: 'No file exists'
});
}
// Check if image
if (file.contentType === 'image/jpeg' || file.contentType === 'image/png') {
// Read output to browser
const readstream = gfs.createReadStream(file.filename);
readstream.pipe(res);
} else {
res.status(404).json({
err: 'Not an image'
});
}
});
});
// @route DELETE /files/:id
// @desc Delete file
router.delete('/:id', (req, res) => {
gfs.remove({ _id: req.params.id, root: 'files' }, (err, gridStore) => {
if (err) {
return res.status(404).json({ err: err });
}
res.redirect('/');
});
});
module.exports = router;
客户：客户结构
为了不让它太复杂，我将添加组件（使用 reactsrap）：
SliderModal.js
import React, { Component } from 'react';
import {
Button,
Modal,
ModalHeader,
ModalBody,
Form,
FormGroup,
Label,
Input
} from 'reactstrap';
import { connect } from 'react-redux';
import { addFile } from '../actions/fileActions';
import PropTypes from 'prop-types';
class SliderModal extends Component {
state = {
modal: false,
name: ''
};
static propTypes = {
isAuthenticated: PropTypes.bool
}
toggle = () => {
this.setState({
modal: !this.state.modal
});
};
onChange = e => {
this.setState({ [e.target.name]: e.target.value });
};
onSubmit = e => {
e.preventDefault();
const newFile = {
name: this.state.name
}
// Add item via addFile action
this.props.addFile(newFile);
// Close modal
this.toggle();
}
render() {
return (
<div>
{this.props.isAuthenticated ?
<Button
color="dark"
style={{ marginBottom: '2rem' }}
onClick={this.toggle}
>Add File
</Button> :
<h4 className="mb-3 ml-4">Please login to manage files</h4>
}
<Modal
isOpen={this.state.modal}
toggle={this.toggle}
>
<ModalHeader toggle={this.toggle}>Add To Files List</ModalHeader>
<ModalBody>
<Form onSubmit={this.onSubmit}>
<FormGroup>
<Label for="file">File</Label>
<Input
type="file"
name="name"
id="file"
placeholder="Add file"
onChange={this.onChange}
/>
<Button
color="dark"
style={{ marginTop: '2rem' }}
block>
Add File
</Button>
</FormGroup>
</Form>
</ModalBody>
</Modal>
</div>
);
}
}
const mapStateToProps = state => ({
file: state.file,
isAuthenticated: state.auth.isAuthenticated
});
export default connect(mapStateToProps, { addFile })(SliderModal);
这是我的代码的 结果：来自 atlas 集群的结果
我只有这个路径和 ID 名称，但我希望所有文件都上传到数据库并显示在我的页面上。该用户和项目集合工作得非常好。我认为最重要的是：routes/api/files.js 和 models/File.js 文件。