Блог

Главная - Вопросы по программированию - мультер, реагируй-загрузка нативного изображения не работает

мультер, реагируй-загрузка нативного изображения не работает

#node.js #reactjs #react-native #multer

Вопрос:

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

это код, который вызывается нажатием кнопки, прикрепленной к кнопке:

 const handlePhoto = async () =>{
        if(image!== null){
            console.log(image)
            const fileToUpload = image;
            const data = new FormData();
            data.append('name', 'Image Upload');
            data.append('file', fileToUpload);
            let res = await fetch(
                'http://localhost:3000/user/pic_upload',
                {
                method: 'post',
                body: data,
                headers: {
                    'Content-Type': 'multipart/form-data; ',
                },
            }
            );  
            let responseJson = await res.json();
            console.log(responseJson,'result')
            if (responseJson.status == 1) {
                alert('Upload Successful');
            }
        } else {
            alert('Please Select File first');
        }
    }

и в индексном файле для пользовательского маршрутизатора:

 const upload=multer({
    storage:multer.diskStorage({
        destination:function(req,file,callback){
            callback(null,'uploads/')
        },
        filename:function(req,file,callback){
            callback(null,new Date().valueOf() path.extname(file.originalname))
        }
    }),
});

router.post('/pic_upload', upload.single('file'), controller.picUpload)

и у маршрутизатора picUpload просто есть консоль.log

Что я должен исправить, чтобы это сработало?

Комментарии:

1. Измените это uploads/ на path.join(path.dirname(require.main.filename || process.mainModule.filename), 'public', 'assets', 'uploads') , если ваша папка находится в /public/assets/uploads

2. консоль req.file в вашем контроллере и отправьте результаты здесь

3. раньше он не был определен, и он все еще показывает неопределенный

4. Проверьте свое изображение во внешнем интерфейсе, есть ли у него такой тип файла, как developer.mozilla.org/en-US/docs/Web/API/File

5. Я не знаю, что вы имеете в виду.. расширение изображения-jpg, хотя

Ответ №1:

Согласно обсуждению комментариев, вы handlePhoto ошибаетесь, и для работы мультера вам нужен File объект типа.

Тип файла: https://developer.mozilla.org/en-US/docs/Web/API/File

Тип файла Изображение: https://i.stack.imgur.com/B0Z96.png

Комментарии:

1. сначала ваш журнал консоли выглядит как из Google Chrome, а тип файла также указывает элемент ввода, но мой код является родным для react, поэтому для этого приложения нет веб-страницы. и я делаю как внешний, так и внутренний интерфейс.

2. э-э, неважно, мне удалось попробовать это с другим примером кода, и теперь это работает! в любом случае, спасибо вам за помощь!

3. В react native вы получите временный uri и этот временный uri, который вам нужно отправить в серверную часть

4. Приятно слышать, я рад вам помочь

Метки: ,