Как использовать multer и React?

Question

[maxemga]

Мне нужно загружать файл на сервер (с инпута) и отправлять путь в БД
Для этого я использую библиотеку multer и функцию:

const multer = require('multer')
const moment = require('moment')


const storage = multer.diskStorage({
    destination(req, file, cb) {
        cb(null, './uploads')
    },
    filename(req, file, cb) {
        const date = moment().format('DDMMYYYY-HHmmss_SSS')
        cb(null, `${date}-${file.originalname}`)
    }
})

const fileFilter = (req, file, cb) => {
    if (file.mimetype === 'image/png' || file.mimetype === 'image/jpeg' || file.mimetype === 'image/jpg') {
        cb(null, true)
    }
    else {
        cb(null, false)
    }
}

module.exports = multer({
    storage,
    fileFilter
})

Для нахождения файла и отправки запроса:

<form action="http://localhost:80/api/server/addArticle" method="POST" enctype="multipart/form-data">

И на сервере брал файл вот так:

router.post('/addArticle', upload.single('img'), async(req, res) => {

Но это без использования React, а сейчас я пишу на React и запрос на сервер у меня осуществляется с помощью fetch, а раньше нужный мне файл находился с помощью запроса action в form и в библиотеки multer по этому токену и ищется нужный файл, но как быть в моей ситуации, как сказать multer что вот этот файл нужно сохранить на сервере?

Comments

[Михаил]

и как отправляете ?

[maxemga]

Михаил,
Хук:

export function useHttp() {
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null)

    const request = useCallback(async (url, method = 'GET', body = null, headers = {}) => {
        setLoading(true)
        try {   
            if (body) {
                body = JSON.stringify(body)
                headers['Content-Type'] = 'application/json'
            }  

            const responce = await fetch(`http://localhost:5000${url}`, {
               method, body, headers
            })
            const data = await responce.json()
            setLoading(false)
            
            return data
        }
        catch(e) {
            setLoading(false);
            setError(e.messege);
            throw e
        }      
    }, [])
    const clearError = () => setError(null)

    return {error, loading, request, clearError}
}

Его использование при отправке:

const change = async (values) => {
        const data = await request('/api/settings/change', 'POST', {id, ...values})
        console.log(data)
    }
<Field type='submit' value='Сохранить' onClick={() => change(values)}/>

[Михаил]

maxemga, файл как отправляете

[maxemga]

Михаил, в объекте values файл и получаю его так:

const {image, name, gender, city, id, formatData} = req.body

Файл отправляется, но это не то что мне нужно, я погуглил и нужно отправлять файл в FormatData. Вот пытаюсь сейчас сделать это