Загрузка изображений из вашего интерфейса React в ваш Mon go db с использованием сервера express - PullRequest
Новая
       8

Загрузка изображений из вашего интерфейса React в ваш Mon go db с использованием сервера express

0 голосов
/ 09 июля 2020

Я пытаюсь публиковать изображения из моего интерфейса React в мою базу данных, используя multer в бэкэнде, все работало нормально, когда я использовал почтальон для загрузки изображений и данных, однако в моем интерфейсе реакции у меня возникли некоторые проблемы с публикацией картинки в базу. Код внешнего интерфейса выглядит следующим образом: 

import React, { useState } from "react";
import axios from "axios";

const Shoes = () => {

    const [name, setName] = useState("");
    const [price, setPrice] = useState("");

    const fileInput = React.createRef();

    const handleName = (e) => {
        setName(e.target.value);
    };
    const handlePrice = (e) => {
        setPrice(e.target.value);
    };

       const onSubmit = async (e) => {
        e.preventDefault();

        const product = {
            name: name,
            price: price,
            productImage: fileInput.current.files[0].name,
        };


        axios
            .post("http://localhost:5000/product/post", product)
            .then((res) => console.log(res.data))
            .catch((err) => console.log(err));

        alert(`Selected file - ${fileInput.current.files[0].name}`);
        console.log(fileInput.current.files[0]);
    };

    return (
        <div>
            <h2>Add Product</h2>

            <form onSubmit={onSubmit}>
                <input
                    type="text"
                    name="name"
                    value={name}
                    onChange={handleName}
                />
                <br />
                <input
                    type="text"
                    name="price"
                    value={price}
                    onChange={handlePrice}
                />
                <br />
                <input type="file" ref={fileInput} />
                <br />
                <input type="submit" value="Submit" />
            </form>

            <hr />
        </div>
    );
};

export default Shoes;

И вот как я использовал multer в express бэкенде 

const express = require("express");
const router = express.Router();
const multer = require("multer");

const Product = require("../models/Product");

const fileFilter = (req, file, cb) => {
    if (file.mimetype === "image/jpeg" || file.mimetype === "image/png") {
        cb(null, true);
    } else {
        cb("JPEG and PNG only supported", false);
    }
};

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, "./uploads");
    },
    filename: function (req, file, cb) {
        cb(
            null,
            new Date().toISOString().replace(/:/g, "-") + file.originalname
        );
    },
});

const upload = multer({
    storage: storage,
    limts: {
        fileSize: 1024 * 1024 * 5,
    },
    fileFilter: fileFilter,
});

router.get("/", (req, res) => {
    Product.find()
        .select("name productImage -_id ")
        .then((pro) => res.json(pro))
        .catch((err) => res.json({ error: "could not get products", err }));
});

router.post("/post", upload.single("productImage"), async (req, res) => {
    console.log(req.file);
    const product = new Product({
        name: req.body.name,
        price: req.body.price,
        productImage: req.file,
    });

    try {
        const pro = await product.save();
        res.json(pro);
    } catch (err) {
        res.status(400).json({ error: "could not post shoe info", err });
    }
});


module.exports = router;

Каждый раз, когда я отправляю изображение из своего внешнего интерфейса, оно публикует изображение как null, когда я зарегистрировал его в консоли, я увидел, что он передает изображение как undefined. Итак, я подумал, что, возможно, для этого требуется путь изображения, и я передал его только с именем, но я не могу найти способ опубликовать путь изображения из внешнего интерфейса.

Заранее спасибо .

1 Ответ

1 голос
/ 09 июля 2020

Загрузка файла в javascript выполняется с использованием FormData. Вы не используете FormData, а отправляете данные как объект. Также вы передаете только имя файла, а не весь контент. 

const product = {
        name: name,
        price: price,
        productImage: fileInput.current.files[0] //.name,
    };

Отметьте это Сообщение SO

...