前端允许人们上传他们的照片,所以我将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=o
或srt=co
或srt=sco
.
关于reactjs - 从前端将图像上传到 Azure blob (React),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60293564/