FineUploader错误获取Azure Blob存储URI [英] FineUploader Wrong Getting Azure Blob Storage URI

问题描述

我正在尝试在我的React应用程序中实现FineUploader React库，以将文件上传到我的Azure Blob存储.

I'm trying to implement FineUploader React library into my React app to upload files to my Azure Blob Storage.

由于某种原因，FineUploader弄错了Blob存储URI.

Looks like for some reason, FineUploader is getting the blob storage URI wrong.

这是我在测试组件中实例化FineUploader的方法:

This is how I instanciate a FineUploader in my test component:

import React, { Component } from 'react';

import FineUploaderAzure from 'fine-uploader-wrappers/azure'
import Gallery from './gallery/index';

const uploader = new FineUploaderAzure({
    options: {
        cors: {
            expected: true,
            sendCredentials: true
        },
        signature: {
            endpoint: 'https://myapp.com/api/getsas'
        },
        request: {
            endpoint: 'https://myaccount.blob.core.windows.net/test-container'
        },
        uploadSuccess: {
            endpoint: 'https://myapp.com/api/done'
        }
    }
})

class Index extends Component {
    render() {
        return (
            <Gallery uploader={uploader} />
        )
    }
}

export default Index;

这是我在控制台中看到的错误.看来FineUploader为Blob存储使用了错误的URI.

Here's the error I'm seeing in the console. Looks like FineUploader is using the wrong URI for the blob storage.

任何想法可能是什么原因造成的?

Any idea what may be causing this?

更新: 按照@GauravMantri的建议，我在选项部分将endpoint更改为containerUrl，但这似乎也无济于事.看起来是这样的:

UPDATE: As per @GauravMantri's suggestion, I changed endpoint to containerUrl in the options section but that didn't seem to help either. Here's what it looks like:

const uploader = new FineUploaderAzure({
    options: {
        cors: {
            expected: true,
            sendCredentials: true
        },
        signature: {
            endpoint: 'https://myapp.com/api/getsas'
        },
        request: {
            containerUrl: 'https://myaccount.blob.core.windows.net/test-container'
        },
        uploadSuccess: {
            endpoint: 'https://myapp.com/api/done'
        }
    }
})

这是我通过邮递员发送请求时得到的SAS: 我发送的请求是:

Here's the SAS I'm getting when I send a request through Postman: The request I'm sending is:

http://example.com/api/files/get/sas?blobUri=https://myaccount.blob.core.windows.net/test-container/test.txt&_method=put

这是我收到的SAS:

"?sv=2017-04-17&sr=b&sig=7pXTnI2r8uGyZms12T9cRvHg1XlLI53ZJtwPUwGElnY%3D&st=2017-12-28T14%3A02%3A56Z&se=2017-12-28T14%3A22%3A56Z&sp=w"

推荐答案

我能够使其正常运行.基本上，有几件事需要牢记:

I was able to make it work. Basically there're a few things that one need to keep in mind:

1. 在您的FineUploader配置中，您将需要endpoint属性，该属性应具有要上传的Blob容器的URL.这就是我的代码中的配置:

1. In your FineUploader config, you will need endpoint attribute and that should have the URL of the blob container where you want to upload. This is how configuration looks like in my code:

var uploader = new qq.azure.FineUploader({
    debug: true,
    element: document.getElementById("uploader"),
    cors: {
        expected: true,
        sendCredentials: false
    },
    signature: {
        endpoint: 'http://localhost:63194/users/sas'
    },
    request: {
        endpoint: 'https://account-name.blob.core.windows.net/container-name'
    },

})

用于获取共享访问签名(SAS)的API应该返回blob URL + SAS Token. API的blobUrl参数应该是Blob的绝对URL.这是我用于API的代码(请不要按原样使用，因为下面的代码未考虑_method参数):

The API for getting Shared Access Signature (SAS) should return blob URL + SAS Token. The blobUrl parameter to the API should be the absolute URL of the blob. This is the code I used for API (please don't use this as is because the code below does not take into consideration the _method parameter):

[Route("sas")]
[HttpGet]
public async Task<HttpResponseMessage> Sas(string blobUri)
{
    var credentials = new StorageCredentials("account-name", "account-key");
    var blob = new CloudBlockBlob(new Uri(blobUri), credentials);
    var sasParameters = new SharedAccessBlobPolicy()
    {
        SharedAccessExpiryTime = DateTime.UtcNow.AddHours(1),
        Permissions = SharedAccessBlobPermissions.Write
    };
    var sasToken = blob.GetSharedAccessSignature(sasParameters);
    var returnValue = blob.Uri.AbsoluteUri + sasToken;
    var resp = new HttpResponseMessage(HttpStatusCode.OK);
    resp.Content = new StringContent(returnValue, System.Text.Encoding.UTF8, "text/plain");
    return resp;
}

我从此处下载了Fine Uploader Azure相关文件: https://fineuploader.com/customize.html，并用它来创建一个简单的HTML页面进行测试.这是我的HTML页面的样子:

I downloaded Fine Uploader Azure related files from here: https://fineuploader.com/customize.html and used it to create a simple HTML page to test it. Here's what my HTML page looks like:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="fine-uploader-gallery.min.css" rel="stylesheet">
    <script src="azure.fine-uploader.min.js""></script>
    <script type="text/template" id="qq-template">
        <div class="qq-uploader-selector qq-uploader qq-gallery" qq-drop-area-text="Drop files here">
            <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
                <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
            </div>
            <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
                <span class="qq-upload-drop-area-text-selector"></span>
            </div>
            <div class="qq-upload-button-selector qq-upload-button">
                <div>Upload a file</div>
            </div>
            <span class="qq-drop-processing-selector qq-drop-processing">
                <span>Processing dropped files...</span>
                <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
            </span>
            <ul class="qq-upload-list-selector qq-upload-list" role="region" aria-live="polite" aria-relevant="additions removals">
                <li>
                    <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
                    <div class="qq-progress-bar-container-selector qq-progress-bar-container">
                        <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
                    </div>
                    <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                    <div class="qq-thumbnail-wrapper">
                        <img class="qq-thumbnail-selector" qq-max-size="120" qq-server-scale>
                    </div>
                    <button type="button" class="qq-upload-cancel-selector qq-upload-cancel">X</button>
                    <button type="button" class="qq-upload-retry-selector qq-upload-retry">
                        <span class="qq-btn qq-retry-icon" aria-label="Retry"></span>
                        Retry
                    </button>

                    <div class="qq-file-info">
                        <div class="qq-file-name">
                            <span class="qq-upload-file-selector qq-upload-file"></span>
                            <span class="qq-edit-filename-icon-selector qq-btn qq-edit-filename-icon" aria-label="Edit filename"></span>
                        </div>
                        <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                        <span class="qq-upload-size-selector qq-upload-size"></span>
                        <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">
                            <span class="qq-btn qq-delete-icon" aria-label="Delete"></span>
                        </button>
                        <button type="button" class="qq-btn qq-upload-pause-selector qq-upload-pause">
                            <span class="qq-btn qq-pause-icon" aria-label="Pause"></span>
                        </button>
                        <button type="button" class="qq-btn qq-upload-continue-selector qq-upload-continue">
                            <span class="qq-btn qq-continue-icon" aria-label="Continue"></span>
                        </button>
                    </div>
                </li>
            </ul>

            <dialog class="qq-alert-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <div class="qq-dialog-buttons">
                    <button type="button" class="qq-cancel-button-selector">Close</button>
                </div>
            </dialog>

            <dialog class="qq-confirm-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <div class="qq-dialog-buttons">
                    <button type="button" class="qq-cancel-button-selector">No</button>
                    <button type="button" class="qq-ok-button-selector">Yes</button>
                </div>
            </dialog>

            <dialog class="qq-prompt-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <input type="text">
                <div class="qq-dialog-buttons">
                    <button type="button" class="qq-cancel-button-selector">Cancel</button>
                    <button type="button" class="qq-ok-button-selector">Ok</button>
                </div>
            </dialog>
        </div>
    </script>

    <title>Fine Uploader Gallery UI</title>
</head>
<body>
    <div id="uploader"></div>
    <script>
        // Some options to pass to the uploader are discussed on the next page
        var uploader = new qq.azure.FineUploader({
            debug: true,
            element: document.getElementById("uploader"),
            cors: {
                expected: true,
                sendCredentials: false
            },
            signature: {
                endpoint: 'http://localhost:63194/users/sas'
            },
            request: {
                endpoint: 'https://account-name.blob.core.windows.net/container-name'
            },

        })
    </script>
</body>
</html> 

运行此代码后，我就可以在blob容器中上传文件了，没有任何问题.

Once I ran this code, I was able to upload files in my blob container without any problems.

这篇关于FineUploader错误获取Azure Blob存储URI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！