React, Node, Mongodb: Мой файл изображения не обслуживается из бэкэнда, и я пытаюсь отрисовать его на стороне React. 404 не найдено

Question

Я загружаю изображение из внешнего интерфейса React.

constructor(props) {
        super(props);
        this.state = {
            uploadRecipesFormData: {},
            selectedFile: null,
            redirect : null,
        };
    }

    uploadRecipe = () => {
        const formData = new FormData();
        formData.append('file', this.state.selectedFile, this.state.selectedFile.name);
        for(const key in this.state.uploadRecipesFormData){
            formData.append(key, this.state.uploadRecipesFormData[key]);
        }
        axios.post(`http://localhost:3000/recipes`, formData, {})
             .then(res =>  {
                 alert(res.data);
                 this.setState({
                     redirect: "/uploaded-recipes"
                 });
             })
             .catch(err => console.error(err));
    }

    onChangeImageHandler = e => {
        this.setState({
            selectedFile: e.target.files[0]
        });
    }

    handleChange = e => {
        e.preventDefault();
        this.handleInputChange(e.target.name, e.target.value);
    }

    handleInputChange = (key, value) => {

        this.setState({
            uploadRecipesFormData: {
                _id: uuidv4(),
                ...this.state.uploadRecipesFormData,
                addedBy: 'guest',
                [key]: value
            }
        });
    }

    submitRecipe = e => {
        e.preventDefault();
        this.uploadRecipe();
    }

В бэкэнде Я получаю изображение вместе с другими данными формы:

const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, 'public/images')
    },
    filename: (req, file, cb) => {
        cb(null, `${file.originalname} `)
    }
});

const upload = multer({ storage: storage }).single('file');

/*
Endpoint: /recipes
Outcome: Add recipe 
*/ 
router.post('/', (req, res) => {

    upload(req,res, err => {
        if(err instanceof multer.MulterError) {
            return res.status(500).json(err);
        }
        else if(err) {
            return res.status(500).json(err);
        }
        console.log(req.file.filename);
        console.log(req.body);

            const newRecipeData = new Recipe({
                _id: req.body._id,
                name: req.body.name,
                ingredients: req.body.ingredients.split(','),
                instructions: req.body.instructions,
                cuisine: req.body.cuisine || '',
                image: `http://localhost:3000/images/${req.file.filename}` || '',
                addedBy: req.body.addedBy || ''
        });

          newRecipeData.save()
                     .then(result => {
                         res.status(201).send('Recipe added successfully!');
                     })
                     .catch(err => console.log(err));
    });
});

Данные хранятся в MongoDb с путем к publi c каталог к ​​изображению. Однако этот файл хранится в виде двоичного файла, а не файла изображения. Я включил express stati c в моем приложении. js:

    app.use(express.static('public'));

Я могу видеть файл в папке public / images, но это двоичный файл, из-за которого при попытке чтобы получить к нему доступ из моего реактивного интерфейса, он выдает ошибку 404. Затем я вручную попытался добавить фактическое изображение в папку public / images, и это сработало. Как я могу сохранить тип файла при получении данных из внешнего интерфейса? Ответы в Интернете мне не ясны, что я пытаюсь сделать.

Answer 1

Ваш код выглядит нормально, однако я могу заметить небольшую ошибку в этом блоке кода, которая может вызывать ошибку:

const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, 'public/images')
    },
    filename: (req, file, cb) => {
        cb(null, `${file.originalname} `)
    }
});

В этом * 1005 есть дополнительный пробел после ${file.originalname} * заявление. Это дополнительное пространство изменило бы имя файла, следовательно, оно выглядит как двоичное, и вы не можете получить к нему доступ из внешнего интерфейса. Попробуйте удалить это место и посмотреть, работает ли оно.