Загрузка изображения base64 с веб-камеры реакции на облачный сервис через узел - PullRequest
Новая
       16

Загрузка изображения base64 с веб-камеры реакции на облачный сервис через узел

1 голос
/ 16 января 2020

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

onChange вызывает следующий метод: 

uploadProfilePic = e => {
  const files = Array.from(this.state.profilePic)
  const formData = new FormData()

  files.forEach((file, i) => {
    formData.append(i, file)
  })
    fetch(`http://localhost:3030/imageUpload`, {
      method: 'POST',
      body: formData
    })
    .then(res => res.json())
    .then(images => {
      this.setState({profilePic: images[0].url})
    })
  }

и на моем сервере. js file; 

  const values = Object.values(req.files)
    const promises = values.map(image => cloudinary.uploader.upload(image.path))

    Promise
      .all(promises)
      .then(results => res.json(results))
  })

выше успешно загружает jpg в cloudinary и устанавливает url для моего состояния, как и предполагалось.

Просто интересно, как настроить 2 вышеуказанных кодовых блока, чтобы иметь возможность загрузить base64 image *, которое было снято с помощью веб-камеры реакции, которое хранится в моем состоянии {this.state.passImage}, чтобы достичь того же результата (иначе говоря, загрузить в облачный и получить URL-адрес)?

до сих пор я Я пытался 

uploadPassImage= e => {

const formData = JSON.stringify(this.state.passImage)

    fetch(`http://localhost:3030/imageUploadPassImage`, {
      method: 'POST',
      body: formData
    })
    .then(res => res.json())
    .then(images => {
      this.setState({passImage: images[0].url})
    })
  }

с кодом сервера; 

  app.post('/imageUploadPassImage', (req, res) => {
    const values = Object.values(req.files)
      const promises = values.map(image => cloudinary.uploader.upload(image.path))

      Promise
        .all(promises)
        .then(results => res.json(results))
    })

без удачи.

1 Ответ

1 голос
/ 16 января 2020

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

о реакции 

uploadPassImage= e => {
const files = Array.of(this.state.passImage)


    const formData = new FormData()

    files.forEach((file, i) => {
      formData.append(i, file)
    })
      fetch(`http://localhost:3030/imageUploadPassImage`, {
        method: 'POST',
        body: formData
      })
      .then(res => res.json())
      .then(images => {
        this.setState({passImage: images[0].url}) 
//sets the data in the state for uploading into SQL database later
      })
    }

на сервере; 

app.post('/imageUploadPassImage', (req, res) => {
   const values = Object.values(req.body)
      const promises = values.map(image => cloudinary.v2.uploader.upload(image,
  function(error, result) {console.log(result, error); }));

      Promise
        .all(promises)
        .then(results => res.json(results))
    })
...