отправка блоба с экспо на express сервер - PullRequest
Новая
       15

отправка блоба с экспо на express сервер

0 голосов
/ 23 марта 2020

Я получаю блоб изображения из URI, чтобы отправить его на мой сервер для хранения. Я получаю изображение, используя запрос get, и все правильно, однако в запросе post что-то не так. Большой двоичный объект, получаемый сервером, всегда имеет размер 0. Я уверен, что правильно получил большой двоичный объект изображения, так как мог бы отобразить его во внешнем интерфейсе после преобразования большого двоичного объекта в base64. Вот код. 


const url = "https://lh3.googleusercontent.com/a-/AOh14Gj1THuWiRu7Vpn85YETJN-aMui7NE8bpnNWOzdi"
      var x, base64data;
      const scope = this
      var formData = new FormData();   
      var request = new XMLHttpRequest();
      request.responseType = "blob";
      request.onload = function () {
          const blob = request.response
          formData.append("file", blob.data);
          console.log(blob.data)

          //Converting the image to base64 so i could display it,
          //and make sure that the blob received is not corrupted
          const fileReaderInstance = new FileReader();
          fileReaderInstance.readAsDataURL(blob); 
          fileReaderInstance.onload = () => {
            base64data = fileReaderInstance.result;              
            scope.setState({base64data: base64data})
          }

          //Sending the blob to the server
          x = new XMLHttpRequest();
          x.open("POST",`${link}images/upload/${data.id}`,true);
          x.setRequestHeader("Content-type", "image/jpeg");
          x.setRequestHeader("Content-Length", formData.length);
          x.send(formData);
      }
      request.open("GET", url);
      request.send();

console.log(blob.data) показывает 

Object {
  "blobId": "69B8ACFE-5E31-4F16-84D8-002B17399F7E",
  "name": "unnamed.jpg",
  "offset": 0,
  "size": 74054,
  "type": "image/jpeg",
}

Ther Код на стороне сервера. 

router.post('/upload/:id', upload.single('file'), async (req, res) => {
    console.log(req.file)
    const imgId = req.file.id
    const id = req.params.id;
  if (!id) return res.send({ error: "Missing playerID" });
  if (!idValidator.isMongoId(id))
    return res.send({ error: "Invalid Id" })
  const player = await Player.findById(id)
  if (!player)
    return res.send({ error: "Player does not exists" })
    const oldImg = player.photo;
    if(oldImg && oldImg.toString() !== "5d3ae42c3f2b2c379c361652"){
      await Images.findByIdAndDelete(oldImg)
    }
    player.photo = imgId;
    const updatedPlayer = await Player.findByIdAndUpdate(id, player,{new:true})
    return res.send({player: updatedPlayer,msg:"Photo Updated!"})
});

console.log(req.file) показывает следующее . 

{ fieldname: 'file',
  originalname: 'unnamed.jpg',
  encoding: '7bit',
  mimetype: 'image/jpeg',
  id: 5e780359fbea1452b8409a3e,
  filename: '9cdeec500a17eccbb302d8571058da59.jpg',
  metadata: null,
  bucketName: 'images',
  chunkSize: 261120,
  size: 0,
  md5: 'd41d8cd98f00b204e9800998ecf8427e',
  uploadDate: 2020-03-23T00:31:21.640Z,
  contentType: 'image/jpeg' }

1 Ответ

0 голосов
/ 23 марта 2020

После долгих поисков я нашел это, и это сработало finalllllyyy !!!! 

postPicture(data) {
    const apiUrl = `${link}images/upload/${data.id}`;
    const uri = "https://lh3.googleusercontent.com/a-/AOh14Gj1THuWiRu7Vpn85YETJN-aMui7NE8bpnNWOzdi";
    const fileType = "jpeg";
    const formData = new FormData();
        formData.append('file', {
          uri,
          name: `photo.${fileType}`,
          type: `image/${fileType}`,
        });
    const options = {
          method: 'POST',
          body: formData,
          headers: {
            Accept: 'application/json',
            'Content-Type': 'multipart/form-data',
          },
        };
    return fetch(apiUrl, options);
      }
...