Я пытаюсь вернуть мои изображения. Я могу опубликовать свои изображения на express, но не могу вернуть их обратно

Question

Я не могу вернуть свои изображения. Я могу опубликовать свои изображения на моем express бэкэнде, но не могу их вернуть. Я считаю, что это связано с моей структурой папок. Кроме того, я использую express -fileupload. Мой фронтенд React. Когда я загружаю свое изображение в свой бэкэнд, оно есть, но когда я получаю его, src = "/ uploads / test.png".

Я пытался изменить структуру папок, но это не проблема.

Структура моей папки C: \ Login-SignUp-master \ Login-SignUp-master \ HairBackEnd \ маршруты

var express = require("express");
const router = express.Router();
const HairModel = require("../models/hairForm_model");

router.post("/upload", (req, res) => {
    if (req.files === null) {
        return res.status(400).json({ msg: "No file uploaded" });
    }

    const file = req.files.file;

    file.mv(`${__dirname}/client/public/uploads/${file.name}`, err => {
        if (err) {
            console.error(err);
            return res.status(500).send(err);
        }

        **res.json({ fileName: file.name, filePath: `/uploads/${file.name}` });**
    });
});

module.exports = router;

Структура моей папки, где мои хранятся изображения: C: \ Login-SignUp-master \ HairBackEnd \ маршруты \ клиент \ public \ uploads

Мой FrontEnd / React

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

const UploadUserPics = ({ history }) => {
    const [file, setFile] = useState("");
    const [filename, setFilename] = useState("Choose File");
    const [uploadedFile, setUploadedFile] = useState({});

    const onChange = e => {
        setFile(e.target.files[0]);
        setFilename(e.target.files[0].name);
    };
    const onSubmit = async e => {
        e.preventDefault();
        const formData = new FormData();
        formData.append("file", file);

        try {
            const res = await axios.post(
                "http://localhost:3080/hair/upload",
                formData,
                {
                    headers: {
                        "Content-Type": "multipart/form-data"
                    }
                }
            );
            console.log(res);

            const { fileName, filePath } = res.data;
            setUploadedFile({ fileName, filePath });
            console.log(uploadedFile.filePath);
        } catch (err) {
            if (err.response.status === 500) {
                console.log("There was a problem with the server");
            } else {
                console.log(err.response.data.msg);
            }
        }

        //history.push("/coloredhair");
    };
    return (
        <Fragment>
            <form onSubmit={onSubmit}>
                <div className="custom-file">
                    <input
                        type="file"
                        className="custom-file-input"
                        onChange={onChange}
                        id="customFile"
                    />
                    <label className="custom-file-label" htmlFor="customFile">
                        {filename}
                    </label>
                </div>
                <button className="QuizForm__btn" type="submit">
                    Submit →
                </button>
            </form>
            {uploadedFile ? (
                <div className="row mt-5">
                    <div className="col-md-6 m-auto">
                        <h3 className="text-center">{uploadedFile.fileName}</h3>
                        <img style={{ width: "100%" }} src={uploadedFile.filePath} alt="" />
                    </div>
                </div>
            ) : null}
        </Fragment>
    );
};

export default UploadUserPics;