Загрузка изображения в Cloudinary Express.js Опубликовать запрос React Axios - PullRequest
Новая
       12

Загрузка изображения в Cloudinary Express.js Опубликовать запрос React Axios

0 голосов
/ 31 января 2019

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

Вот как я готовлю изображение, чтобы отправить его позже: 

          var data = new FormData();
          console.log(event.target.files[0]) // this prints FileObject succesfully
          data.append('image', event.target.files[0]);
         console.log(data) // this prints {} but i guess its natural since its FormData ??
          this.imageToUpload = data;

Вот как я отправляю запрос: 

 axios.post('/api/courses/uploadImage',this.imageToUpload, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }

    })
    .then( (response) => {
      alert(JSON.stringify(response));


    })
    .catch(function (error) {
      console.log(error);
    });

Теперь на стороне сервера req.body пусто. 

router.post("/courses/uploadImage",(req,res,next)=>{

    console.log(req.body) // empty
    var image = req.body;
   cloudinary.uploader.upload(image, function(error, result) { console.log(result) });


  })

Кроме того, что я действительно должен поставить в первый параметр (изображение в данном случае) uploader.upload?

Ответы [ 3 ]

0 голосов
/ 01 февраля 2019

Я решил свою проблему, напрямую загрузив изображения в облачный сервис с клиента на примере html5 codepen.

0 голосов
/ 07 апреля 2019

Вы можете сделать это так.Я успешно попробовал в своем проекте. 

function upload(){
  var data = new FormData();
  data.append('image', event.target.files[0]);
  data.append('username', 'Saurabh'); //if you have other fields

  axios.post('/api/courses/uploadImage', data,
   headers: {
    //your headers
   })
  .then( (response) => {
   alert(JSON.stringify(response));
  })
  .catch(function (error) {
   console.log(error);
  });
}

В вашем экспресс-маршруте вы можете просто получить значения, подобные этому 

router.post('/api/courses/uploadImage', upload.single('image'), async(req,res, next) => {

 const result = await cloudinary.v2.uploader.upload(req.file.path);
 console.log(req.body.username); //Saurabh

 //your logic

});
0 голосов
/ 01 февраля 2019

Не прямой ответ, но если вы хотите, Cloudinary также предлагает способ прямой загрузки изображений с вашего внешнего интерфейса, чтобы сэкономить вам некоторую работу.Вы можете читать дальше .

Я работал с их виджетом, и его очень легко интегрировать практически в любое приложение.

...