使用 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!!'); });
}

我所说的代码中的 cmets 是什么意思：

1. 图片的 URL 应该是这样的格式：Blob SAS Url
2. Curr_date 的格式是否正确，可以被x-ms-date 标头接受？
3. 函数btoa是否用于将图像转换为二进制编码？
4. 是否应该将 Axios 中的所有标头添加到帐户存储 CORS（在标头字段中）？
5. 获取图像大小的正确方法是什么？ （.size 函数？实际上，我在将所有图像附加到其中之后传递了formData。

运行程序后，在控制台出现两条错误信息：

我该如何解决这些问题？

更新：

我做了这些改变：

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

Answer 1

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