javascript - 使用 Nodejs Express Multer 将图像从 React Native 上传到 MongoDB Atlas

Question

我正在尝试从 React Native App(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'});
    }
  });
});

反应本机代码

//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!');
       });
  };

还有什么方法可以上传图片吗？任何帮助，将不胜感激。

标签： javascriptnode.jsreact-nativemultermongodb-atlas