reactjs - 从前端将图像上传到 Azure blob (React)

标签 reactjs azure azure-blob-storage

前端允许人们上传他们的照片,所以我将base64发送到服务器并最初使用它,但是防火墙存在问题,阻止了包含base64的请求。作为替代解决方案,我尝试将图像上传到 azure blob 获取文件名,然后将其发送到服务器进行处理,在服务器中我生成用于 blob 验证和处理的 sas token 。

当我在本地工作并且前端连接与 @azure/storage-blob 一起工作时,这工作得非常好 和 uploadBrowserData() 当我发送 arrayBuffer 作为参数时

export const uploadSelfieToBlob = async arrayBuffer => {
    try {
        const blobURL = `https://${accountName}.blob.core.windows.net${sasString}`;
        const blobServiceClient = new BlobServiceClient(blobURL, anonymousCredential);
        const containerClient = blobServiceClient.getContainerClient(containerName);
        let randomString = Math.random().toString(36).substring(7);
        const blobName = `${randomString}_${new Date().getTime()}.jpg`;
        const blockBlobClient = containerClient.getBlockBlobClient(blobName);
        const uploadBlobResponse = await blockBlobClient.uploadBrowserData(arrayBuffer);
        return { blobName, blobId: uploadBlobResponse.requestId };
    } catch (error) {
        console.log('error when uploading to blob', error);
        throw new Error('Error Uploading the selfie to blob');
    }
};

当我部署时这不起作用,前端部署在EastUs2位置和本地开发位置不同。

我认为为匿名访问生成的 sasString 具有时区选项,因此我生成了 2 个不同的一个,一个用于本地,一个用于选择相同位置的托管服务器。

 Failed to send request to https://xxxx.blob.core.windows.net/contanainer-name/26pcie_1582087489288.jpg?sv=2019-02-02&ss=b&srt=c&sp=rwdlac&se=2023-09-11T07:57:29Z&st=2020-02-18T00:57:29Z&spr=https&sig=9IWhXo5i%2B951%2F8%2BTDqIY5MRXbumQasOnY4%2Bju%2BqF3gw%3D

我错过了什么,任何线索都会有帮助,谢谢

最佳答案

首先,正如评论中提到的,CORS 设置存在问题,因此您收到了初始错误。

<strong>AuthorizationResourceTypeMismatch</strong>This request is not authorized to perform this operation using this resource type. RequestId:7ec96c83-101e-0001-4ef1-e63864000000 Time:2020-02-19T06:57:31.2867563Z

我查找了这个错误代码 here 然后仔细查看您的 SAS URL。

我在您的 SAS URL 中注意到的一件事是您设置了 signed resource type (srt)c (container)并尝试上传 blob。如果您查看可以使用srt=c执行的操作类型的描述 here ,您会注意到不支持 blob 相关操作。

为了执行 Blob 相关操作(例如 Blob 上传),您需要将签名资源类型值设置为 o (for object) .

请重新生成您的 SAS token 并将签名的资源类型包含为对象(您也可以在其中包含容器和/或服务),然后您的请求应该会起作用。所以本质上是你的srt您的 SAS URL 中的内容应类似于 srt=osrt=cosrt=sco .

关于reactjs - 从前端将图像上传到 Azure blob (React),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60293564/

相关文章:

javascript - 如何将图像URI转换为字节Expo

azure - Azure DevOps 的 TFS 2017 更新 3

asp.net-mvc - 并行 Blob 上传间歇性抛出 404 Bad Request

bash - 尝试将 vhd 上传到存储帐户中的 blob 容器时,SAS URI 损坏

node.js - 如何使用 azure-storage-node 按修改日期查询 Azure Blob

reactjs - Next.js 在 GraphQL 突变内重定向

javascript - React Native : this. setState 不是一个函数

.htaccess - 使用 webpack 构建应用程序后 React 路由不起作用

azure - Terraform 中的列表到字符串以供 ARM 模板使用

azure - 您需要确保 WebApp1 使用 ASP.NET v4.7 运行时堆栈