如何使用反应本机发布或放置原始二进制文件

Question

我需要将react本机应用程序中的图像文件放入预先配置的s3上载URL。我看到了一个fetch示例，它通过path将图像作为二进制文件上传，但它是作为多部分表单上传的。由于s3上传url只能将其作为正文中的原始二进制文件，而不能作为多部分的内容类型，因此使用fetch或react native中的任何其他库将原始二进制图像作为正文使用的语法是什么？

下面的代码将其作为表单数据上传-这不是我想要做的。

          var photo = {
            uri: response.uri,
            name: fileName,
          };
          const body = new FormData();  // how can I do this not as a form?
          body.append('photo', photo);
          const results = await fetch('https://somes3uploadurl.com, {
            method: 'PUT',
            body,
          });

Answer 1

您不需要使用react native fs或该缓冲区库。相反，只需使用https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsArrayBuffer将结果传递给fetch的body参数。readAsBinaryString和readAsDataUrl给了我奇怪的结果。

注意：我不必在我的内容类型标题中追加"； charset=utf-8"。

例子：

const fileReader = new FileReader();
fileReader.addEventListener('load', (event: any) => {
  const buffer = event.target.result;
  return fetch(link.url, {
    method: 'PUT',
    body: buffer,
  })
    .then((response) => {
      if (!response.ok) {
        throw new Error(
          `${response.status}: ${response.statusText}`
        );
      }
      return response;
    })
    .then(resolve, reject);
});
fileReader.addEventListener('error', reject);
fileReader.addEventListener('abort', reject);
fileReader.readAsArrayBuffer(file);

Answer 2

您还可以使用下一个解决方案：

  /**
   * @param {{contentType: string, uploadUrl: string}} resourceData for upload your image
   * @param {string} file path to file in filesystem 
   * @returns {boolean} true if data uploaded
   */
  async uploadImage(resourceData, file) {
    return new Promise((resolver, rejecter) => {
      const xhr = new XMLHttpRequest();

      xhr.onload = () => {
        if (xhr.status < 400) {
          resolver(true)
        } else {
          const error = new Error(xhr.response);
          rejecter(error)
        }
      };
      xhr.onerror = (error) => {
        rejecter(error)
      };

      xhr.open('PUT', resourceData.uploadUrl);
      xhr.setRequestHeader('Content-Type', resourceData.contentType);
      xhr.send({ uri: file });
    })
  }

并从代码中调用此函数，如：

  let isSuccess = await uploadImage({
    contentType: "image/jpeg",
    uploadUrl: "http://my.super.web.amazon.service..."
  }, "file:///path-to-file-in-filesystem.jpeg")

资料来源：https://github.com/react-native-community/react-native-image-picker/issues/61#issuecomment-297865475

Answer 3

事实证明，您可以通过多种方式发送文件，包括base64和作为缓冲区。

使用react本机fs和缓冲区：

base64上传正常，但图像不知怎么被破坏了。因此，我使用缓冲区上传：

export const uploadToAws = async (signedRequest, file) => {
  const base64 = await fs.readFile(file.uri, 'base64')
  const buffer = Buffer.from(base64, 'base64')
  return fetch(signedRequest, {
    method: 'PUT',
    headers: {
    'Content-Type': 'image/jpeg; charset=utf-8',
    'x-amz-acl': 'public-read',
   },
    body: buffer,
  })
}

请注意，在服务器上，您需要确保设置了正确的内容类型：{ContentType:“image/jpeg；charset=utf-8”，'x-amz-acl'：'public read'}，因为fetch似乎将字符集添加到了内容类型中。