Multer req.file всегда не определен, несмотря на созданный объект файла - PullRequest
0 голосов
/ 11 января 2020

Я уже прочитал все вопросы, связанные с этим, и ничего не работает. Я потратил на это целый день, и я не могу понять, в чем дело.

Я пытаюсь загрузить файл в свою базу данных, используя React, mon goose, mongoDB и express / node.

Вот что я уже сделал:

  • Добавлено method = "post" и enctype = "multipart / form-data" в моей форме
  • свойство "name" файла ввода равно "icon" и в промежуточном программном обеспечении upload.single ("icon") тоже.

При отправке у меня вызывается функция action.

export const updateUserIconette = icon => async dispatch => {
    console.log("Number 1");
    console.log(icon);
    try {
        const res = await axios.post("/me", icon);
        dispatch({
            type: UPDATE_PROFILE_SUCCESS,
            payload: res.data
        });
    } catch (err) {
        const errors = err.response.data.errors;
        if (errors) {
            errors.forEach(error => dispatch(setAlert(error.msg, "danger")));
        }
        dispatch({
            type: UPDATE_PROFILE_ERROR
        });
    }
};

Здесь записывается файл console.log номер 1 и журнал значков, который является файловым объектом.

И маршрут API Post здесь:

const multer = require("multer");
const storage = multer.diskStorage({
    destination: function(req, file, callback) {
        callback(null, "./uploads/");
    },
    filename: function(req, file, callback) {
        callback(null, file.originalname);
    }
});
const fileFilter = (req, file, callback) => {
    if (file.mimetype === "image/jpeg" || file.mimetype === "image/png") {
        callback(null, true);
    } else {
        callback(null, false);
    }
};
const upload = multer({ storage: storage, fileFilter: fileFilter });

router.post(
    "/",
    [
        auth,
        upload.single("icon")
    ],
    async (req, res) => {

console.log("number 2")
console.log(req.file)
        // Build the Profile object
        const profileFields = {};
        profileFields.user = req.user.id;
        if (req.body.username) profileFields.username = req.body.username;
        if (req.body.bio) profileFields.bio = req.body.bio;
        if (req.body.location) profileFields.location = req.body.location;
        if (req.file) profileFields.icon = req.file.path;

        try {
            let user = await User.findOne({ _id: req.user.id });

            if (user) {
                //Update
                user = await User.findOneAndUpdate(
                    { _id: req.user.id },
                    { $set: profileFields },
                    { new: true }
                );
                return res.json(user);
            }
            await user.save();
            res.json(user);
        } catch (err) {
            console.error(err.message);
            res.status(500).send("Server Error");
        }
    }
);

Здесь console.log номер 2 регистрирует, но не req.file, потому что он пуст.

1 Ответ

0 голосов
/ 12 января 2020

Хорошо, вот рабочая демонстрация с использованием react, multer, express, mongodb и mongoose. Это не модно, почти голые кости, но это работает. Что вы должны сделать, это пройтись по своему проекту и убедиться, что каждый файл / функция / промежуточное программное обеспечение работает так, как задумано в потоке (см. Пример потока ниже).

Github repo : https://github.com/mattcarlotta/upload-image-example


Следуйте инструкциям README для его запуска.

Все важные файлы будут иметь примечания о том, что делает их функция.

Файлы, на которые нужно сфокусироваться :

Flow :

  • Пользователь добавляет файл (изображение) и адрес электронной почты и нажимает Submit, чтобы отправить запрос POST в API.
  • Запрос POST сначала проходит через промежуточное ПО multer .
  • Если он действителен, запрос обрабатывается с помощью значок загрузки маршрута .
  • Маршрут передает его в промежуточное ПО saveIcon .
  • Промежуточное ПО saveIcon сохраняет изображение в uploads затем передает запрос на контроллер createIcon .
  • Контроллер сохраняет путь к файлу email и icon в базу данных mongodb, а затем отправляет ответ (message и remoteicon) в клиентскую форму .
  • Клиентская форма получает res (ответ) от API и устанавливает его в состояние .
  • Когда состояние обновляется, remoteicon устанавливается как src для img элемента, который, в свою очередь, делает запрос GET обратно к API, который, в свою очередь, отправляет обратно загруженное изображение.

В идеале большая часть этого потока будет микросервисной (не привязанной к вашему основному приложению), поскольку она значительно упростит вашу структуру. Более подробную информацию можно найти здесь .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...