资料图片：React Native 和 Azure答案

【问题标题】：Profile Picture: React Native and Azure资料图片：React Native 和 Azure
【发布时间】：2021-01-11 03:37:14
【问题描述】：

我正在为服务器开发一个使用 React-native 和 Node.js 的应用程序，现在是时候实现个人资料图片了。我正在考虑使用 Microsoft Azure 存储，特别是 Blob 存储服务来保存文件。我知道如何使用 Blob 存储服务，所以我想将图像发送到服务器，然后从服务器发送到 Azure。但是，当我可以从 react-native 应用程序发送图像时，我认为我正在使用额外的步骤。

有人知道是否可以在 react-native 中做到这一点？我应该如何实施它？或者您可以向我推荐一种简单的个人资料图片实施方法。

提前致谢！

【问题讨论】：

由于没用过React Native，想知道是不是和浏览器一样的限制。我可以在不配置 CORS 的情况下使用 React Native 应用程序发出跨域请求吗？
@GauravMantri 我对 React-native 和服务器也有点陌生。配置 CORS 是什么意思？
@Leticia 你能帮我我有同样的事情吗？你是怎么实现的？

标签： node.js azure react-native azure-blob-storage

【解决方案1】：

您可以使用 Azure 存储 JavaScript 客户端库将照片从客户端直接上传到 Azure 存储：https://github.com/Azure/azure-storage-node/tree/master/browser

在此处查看示例：https://github.com/Azure/azure-storage-node/blob/master/browser/samples/sample-blob.html

【讨论】：

问题说明“React Native”。您的答案指向基于 Web 的 Azure 存储 JavaScript 客户端库

【解决方案2】：

您可以使用 rn-fetch-blob 将文件/图像上传到 Azure Blob 存储

示例代码

const storageURL = 'account_name.blob.core.windows.net';

const assetPath = `${storageURL}/${container_name}/${file_name}.png`;

const file = this.state.selectedImage;

await RNFetchBlob.fetch(
  "PUT",
  `${assetPath}?${sas.token}`,
  {
    "x-ms-blob-type": "BlockBlob",
    "content-type": "application/octet-stream",
    "x-ms-blob-content-type": file.type
  },
  RNFetchBlob.wrap(file.uri)
)
  .progress((progress) => {
    console.log("Progress ==> ", progress);
  })
  .uploadProgress((progress) => {
    console.log("Upload Progress ==> ", progress);
  })
  .then((response) => {
    console.log("Success Response ==> ", JSON.stringify(response));
  })
  .catch((e) => {
    console.log("Error at saving image into Azure Storage", JSON.stringify(e));
  })

【讨论】：