javascript - 使用 Axios [VueJs] 将图像上传到 Azure Blob 容器

Question

我正在尝试使用 Axios PUT 函数将图像上传到 Azure 存储。

我所做的如下:

1. 我在 Azure 中创建了一个存储帐户，然后添加了 CORS 规则，如下所示:CORS rule

2. 我创建了一个名为 user-pic 的 Blob。

3. 我使用 Axios 为我发出请求

代码:

function upload(formData) {

    //get the current date
    var currentdate = new Date(); 
    var Curr_date = currentdate.getDay + '-' + currentdate.getMonth + '-' + currentdate.getFullYear; 

    //Here I am trying to convert the image to binary encoding.
    var data = btoa(formData);

    //The image Url, [ below there is an example from where I take this url ].
    const url = "https://XXXXXXX.blob.core.windows.net/XXXXXXXXXXXX";

    //Headers are required for me, do I need to add all Headers in my code also in CORS of the storage account?
    axios.put(url, data {
          headers: {
            "Access-Control-Allow-Origin" : "*",
            'Access-Control-Allow-Methods': 'GET, POST, PATCH, PUT, DELETE, OPTIONS',
            "Access-Control-Allow-Headers": "Origin, Content-Type, x-ms-*",
            "Content-Type": "image/png",
            "Content-Length": data.length, //here I am trying to get the size of image.
            "x-ms-date": Curr_date,
            "x-ms-version": sv,
            "x-ms-blob-type": "BlockBlob",
          }            
        })
        .then ( response => { console.log(response); console.log('correct!!'); } )
        .catch ( error => { console.log(error); console.log('error here!!'); });
}

代码中的注释是什么意思:

1. 图像 URL 的格式应与此相同:Blob SAS Url
2. Curr_date 的格式是否正确，可以被 x-ms-date header 接受？
3. 函数btoa用于将图像转换为二进制编码吗？
4. 我应该将 Axios 中的所有 header 添加到帐户存储 CORS 中(在 header 字段中)吗？
5. 获取图像大小的正确方法是什么？ (.size 函数？实际上，我在将所有图像附加到 formData 后传递它。

运行程序后，在控制台中，我收到两条错误消息:

如何解决这些问题？

更新:

我做了这些更改:

1. 我更改 CORS:CORS
2. 我收到此错误消息:Error Msg

Answer 1

为 Azure 存储定义的 CORS 规则缺少 http://localhost起源。