使用Axios [VueJs]

Question

我正在尝试使用Axios PUT 功能将图像上传到 Azure Storage 。

我所做的如下：

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. 图片网址应采用以下格式：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来源。