Question

我在 React 中使用 Ionic-Camera-API。我已经阅读了相当多的帖子及其使用此 API 的入门知识，但我缺乏这些数据类型的基本知识。我已经走了这么远，请告诉我我做错了什么以及为什么这是必要的：

function usePhotoGallery() {
  const { getPhoto } = useCamera();

  const takePhoto = async () => {
    const cameraPhoto = await getPhoto({
      resultType: CameraResultType.DataUrl,
      source: CameraSource.Camera,
      quality: 100,
    });

    const { dataUrl } = cameraPhoto;

    if (dataUrl) {
      const blob = await fetch(dataUrl).then((r) => r.blob());

      const reader = new FileReader();
      reader.addEventListener('loadend', async () => {
        const formData = new FormData();
        const blob = new Blob([reader.result!]);

        formData.append('blob', blob, 'Fuckyou');

        const response = await fetch('http://localhost:8000/analyse', {
          method: 'PUT',
          body: formData,
        })
          .then((res) => console.log('res', res))
          .catch((error) => console.log('ERROR: ', error));
      });

      reader.readAsDataURL(blob);
    }
  };

  return {
    takePhoto,
  };
}

为什么需要这个 FileReader 实例？
然后我必须从对象 url ("blob:http.....") 创建一个 blob，将它提供给文件阅读器，然后创建另一个 blob？人们为什么要这样做？
当我溅出 console.log 时，我可以看到这 2 个 Blob 是使用 size 属性创建的。当我继续执行 formData.append() 并将其记录为空时。在那里我没有在我的请求中发送数据。我做错了什么？

我真的很感激任何帮助。不知道如何从这里走得更远。

Ionic：拍照，然后将该图片发送到服务器

0 个答案: