Загрузка изображения в реакцию с помощью multer

У меня есть два файла: файл сервера и файл моей регистрации. Итак, на стороне сервера у меня есть следующий код для файла сервера:

import multer from 'multer';

const storage = multer.diskStorage({
    destination: function(req, file, cb) {
        return cb(null, "public/images")
    },
    filename: function(req, file, cb) {
        return cb(null, `${Date.now()}_${file.originalname}`)
    }
})
const upload = multer({storage:storage})

app.post('/register', upload.single('user_profilepic'), (req, res) => {
    const sql = "INSERT INTO users (`user_firstname`, `user_lastname`, `user_username`, `user_gender`, `user_location`, `user_phone_no`, `user_email`, `user_password`, `user_category`, `user_profilepic`, `user_skill`) VALUES (?)";
     {
        if (err) return res.json({Error: "Password hashing error!"})
        const values = [
            req.body.user_firstname,
            req.body.user_lastname,
            req.body.user_username,
            req.body.user_gender,
            req.body.user_location,
            req.body.user_phone_no,
            req.body.user_email,
            req.body.user_category,
            req.file.filename,
            req.body.user_skill
        ]

        db.query(sql, [values], (err, result) => {
            console.info(req.file.filename)
            if (err) return res.json({Error: "Values Entry Error!"});
            return res.json({Status: "Data Entry Successful"})
        })
    })
});

и это код файла реестра

import axios from 'axios';

function Register() {

    const [values, setValues] = useState({
        user_firstname: '',
        user_lastname: '',
        user_username: '',
        user_gender: '',
        user_location: '',
        user_phone_no: '',
        user_email: '',
        user_category: '',
        user_profilepic: {},
        user_skill: ''
    })

    const navigate = useNavigate();
    const handleSubmit = (event) => {
        event.preventDefault();
        axios.post('http://localhost:5500/register', values)
        .then(res => {
            if (res.data.Status === 'Data Entry Successful') {
                alert("Sign Up Successful!");
                navigate('/login');
            }
            else {
                alert(res.data.Error);
            }
        })
        .catch(err => console.info(err))
    }

<input type='file' name='image' required='required' placeholder='Select Image' onChange = {(e) => setValues({...values, user_profilepic: e.target.files[0]})} />

Код работает, но я не вижу, чтобы что-либо загружалось в папку назначения на сервере, а также в базу данных MySQL. Я вообще не получаю ошибок ни со стороны внешнего интерфейса, ни со стороны серверной части. Оба говорят, что скомпилировались успешно. Пожалуйста, помогите

Я ожидал, что изображение будет сохранено на локальном диске, а имя файла/путь будет сохранено в MySQL. Затем после вызова изображение может отображаться на интерфейсе вместе с другими данными.

🤔 А знаете ли вы, что...
JavaScript был первоначально создан для улучшения интерактивности веб-страниц.