Образ облачной загрузки не работает (реагировать на родной и узлы

Я пытаюсь загрузить изображение из своего собственного приложения для реакции на nodejs и в облачное облако, но у меня это не работает. Это мой собственный код реакции:

const App = () => {
  const [profileImageSource ,setProfileImageSource] = useState(require('./images/profilePic.png'));
  const [imageData, setImageData] = useState("");
  const [okay, setOkay] = useState(false);

  const config = {
    withCredentials: true,
    baseURL: 'http://localhost:3000/',
    headers: {
      "Content-Type": "application/json",
    },
  };
  const handleProfileImage = () => {
      const options = {
        title: 'Select photo',
        base64: true
      };

      ImagePicker.showImagePicker(options, (res) => {
        if(res.didCancel){
        }
        else if(res.error){
        }
        else{
          const image = {data: res.data};

          axios
          .post('/clients/upload-image', {
            data: JSON.stringify({image})
          },
          config
        )
          .then((res) => console.log("ok"))
          .catch((err) => alert(err));
        }
      })
    }

И это мой код nodejs:

require('dotenv').config();

const cloudinary = require('cloudinary').v2;

//Cloudinary configurations
cloudinary.config({
    cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
    api_key: process.env.CLOUDINARY_API_KEY,
    api_secret: process.env.CLOUDINARY_API_SECRET
});

app.post('/clients/upload-image', (req, res) => {
    const imageStr = req.body.data;
    const uploadedResponse = 
        cloudinary
        .uploader
        .upload(imageStr, {
            upload_preset: 'user',
        })
        .then((uploadedResponse) => console.log(uploadedResponse))
        .catch((err) => console.log("error"));
}

Где я не прав? Я получаю ошибки и картинки не загружаются в облачную среду


react-native node.js cloudinary react-native-image-picker
person Omer Ohana    schedule 08.11.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Можете ли вы поделиться полученным сообщением об ошибке? Кроме того, можете ли вы подтвердить, что imageStr (он же req.body.data) правильно получен серверной частью? (может быть, распечатать перед загрузкой?)

person ekt    schedule 08.11.2020

arrow_upward
0
arrow_downward

Вот простой способ загрузки файлов и использование огромного в качестве вашего bodyParser, он упростит вашу жизнь, используя грозный, то же самое может поручиться за multer теперь, которое сводится к предпочтениям

Итак, во-первых, я бы посоветовал, чтобы в вашем клиенте вы также использовали JavaScript FormData (встроенная библиотека)

  • Итак, как вы будете поступать, когда время для отправки изображения на сервер, выглядит следующим образом:
const uploadPicture = ()=>{

    const data = new FormData();
    
    data.append('image', file)// So 'image' is the key and **file** now this is the file uploaded in user that you have in state
    
    axios.post(url, data).then(res=>{
        
         console.log(res)
    
    }).catch(err=>{

        console.log(err)

    })

}

Теперь о том, как справиться с делом

  • Сначала установите npm i formidable или yarn add formidable
  • Как только это будет сделано, вы готовы к работе.
const cloudinary = require('cloudinary').v2;
const Formidable = require('formidable');

cloudinary.config({
    cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
    api_key: process.env.CLOUDINARY_API_KEY,
    api_secret: process.env.CLOUDINARY_API_SECRET
});

router.post('/api/upload', (req, res)=>{

    const form = new Formidable.IncomingForm();//Here you initialze your formidable instance
    form.parse(req, (error, fields, files)=>{
      
       const {image} = files //So due to in our request we sent a **file** which is an image then formidable parsed that request and placed file received from client in **files** that you see in callback function so now we de-structure it by key that we set in client

        cloudinary.uploader.upload(image.path, {folder:'here you can specify folder you want'}, (err, results)=>{

            if (err) return console.log(err)
            const image_url = results.secure_url
        }) 

    })

})
  • Вот так вы загрузили свое изображение

Если это не имеет для вас смысла: вот бессовестная затычка

  • Посетите мой канал на YouTube. Я рассказал, как работать с облачным сервисом.

  • Ссылка: https://youtu.be/mlu-tbr2uUk

person Ntshembo Hlongwane    schedule 08.11.2020