Загрузите изображение из React Native в MongoDB Atlas, используя Nodejs Express Multer - PullRequest
Новая
       96

Загрузите изображение из React Native в MongoDB Atlas, используя Nodejs Express Multer

0 голосов
/ 09 мая 2020

Я пытаюсь загрузить изображение профиля пользователя из приложения React Native (Android). Я новичок в загрузке изображений, поэтому я поискал и нашел пакет под названием multer. Поскольку я использую Mongodb Atlas, у multer есть опция хранения MemoryStorage, а с помощью MemoryStorage я попытался загрузить изображение в Atlas, но проблема, с которой я столкнулся, заключается в том, что я не использую формат, в котором я должен отправлять данные в Nodejs. Я использую FormData () для отправки деталей изображения на Nodejs. Я могу ошибаться в выборе формата, пакета или где-либо еще. Пожалуйста, поправьте меня, если где-то обнаружите, что я ошибаюсь. Ниже приведен код для всего.

аватар . js

const avatarSchema = new Schema(
  {
    profile_avatar: {
      type: Buffer,
      contentType: String,
      //   required: [true, 'fee is required'],
    },
  },
  {
    timestamps: true,
  },
);
const avatar = mongoose.model('avatar', avatarSchema);

module.exports = avatar;

маршрут аватара 

let Avatar = require('../models/avatar');
const multer = require('multer');
var storage = multer.memoryStorage();
var upload = multer({storage: storage});

router.route('/add/image').post(upload.single('avatar'), (req, res, next) => {
  console.log(req); // it does not get hit  
  var newAvatar = new Avatar();
  newAvatar.profile_avatar = req.file.buffer;
  newAvatar.save(function(err) {
    console.log('error', err);
    if (err) {
      console.log(error);
    } else {
      res.send({message: 'uploaded successfully'});
    }
  });
});

React Native Code 


//Function to select single image from gallery(its working fine)
imagePick = () => {
    let options = {
      quality: 0.2,
      maxWidth: 500,
      maxHeight: 500,
      allowsEditing: true,
      noData: true,
      storageOptions: {
        skipBackup: false,
        path: 'images',
      },
    };
    ImagePicker.launchImageLibrary(options, response => {
      console.log('Response = ', response);
      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
        alert(response.customButton);
      } else {
        this.setState({
          imageData: response,
        });
      }
    });
  };

//Function to structure FormData

 createFormData = photo => {
    const data = new FormData();
    data.append('avatar', {
      name: photo.fileName,
      type: photo.type,
      uri:
        Platform.OS === 'android'
          ? photo.uri
          : photo.uri.replace('file://', ''),
    };);
    return data;
  };

//Function to send Image data to Nodejs(Not Working)
 sendImage = () => {
     fetch('http://10.0.2.2:5000/user/add/image', {
       method: 'POST',
       credentials: 'same-origin',
       redirect: 'follow',
       referrer: 'no-referrer',
       body: this.createFormData(this.state.imageData),
     })
       .then(response => response.json())
       .then(response => {
         console.log('upload succes', response);
         Alert.alert('Upload success!');
       })
       .catch(error => {
         console.log('upload error', error);
         Alert.alert('Upload failed!');
       });
  };

Я могу загрузить изображение каким-либо другим способом? Любая помощь будет принята с благодарностью.

...