图像阵列未使用multer express middlewarre上传到文件夹并做出反应

时间:2020-09-18 09:50:28

标签: node.js reactjs express multer

addItem.js(express.js文件)

const express = require("express");
const router = express.Router();
var multer = require("multer");
const AddItem = require("../models/addItemModel");

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "newItems/");
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + file.originalname);
  },
});

var upload = multer({ storage: storage });

router.get("/", (req, res) => {
  AddItem.find({}, (err, data) => {
    res.json(data);
  });
});

/*multiple files upload*/
router.post("/", upload.array("photos", 5), function (req, res, next) {
  var fileinfo = req.files;
  var title = req.body.title;
  console.log(title);
  console.log(fileinfo);


addItem = new AddItem({
   photos: fileinfo.path,
   title: req.body.title,    
});
addItem.save(() => {
   res.json("Success");
 });
    
    
    module.exports = router;

addItem.js

const AddNew = (props) => {
  const [title, setTitle] = useState();
  const [photos, setPhotos] = useState([]);
const addItems = () => {
    const photo = photos;
data.append("title", title);
data.append("photos", photo);
 axios
      .post("http://localhost:80/newItem", data)
      .then((res) => console.log(res))
      .catch((e) => console.log(e));
  };
return (
    <div>
      <Container>
<Form.Group>
                <Form.File
                  id="exampleFormControlFile1"
                  label="upload images"
                  multiple
                  onChange={(e) => {
                    
                      const img = Array.from(e.target.files);
                      setPhotos(img);
                    
                  }}
                  accept=".jpg"
                />
              </Form.Group>
<Form.Group controlId="exampleForm.ControlInput1">
                <Form.Label>Title</Form.Label>
                <Form.Control
                  type="text"
                  placeholder="Title"
                  value={title}
                  onChange={(e) => setTitle(e.target.value)}
                />
              </Form.Group>
</Container>
    </div>
);
};
export default AddNew;

在上面的代码中,我试图使用multer作为图像的中间件,使用react和express and react来存储图像。但是我没有将图像存储在文件夹和图像链接中,而是将请求正文存储在mongodb中。如何做到这一点?This is my folder structure on the left.

0 个答案:

没有答案