使用 .net 核心 Web API 和 jquery 从 azure blob 上传和检索图像

Question

我正在尝试创建一个博客，您可以在其中 post 使用图片。基本上我想做的是 select 来自本地机器的图像，然后单击按钮使用 post 方法将其发送到 azure blob，然后使用 get 方法检索图像并将其显示在网页上。我找到了这个 Microsoft 文档：
https://docs.microsoft.com/en-us/azure/storage/blobs/storage-quickstart-blobs-dotnet
但我不知道如何将它应用于 get 和 post 方法。我也试过这个：

static void Main(string[] args)
{
string connStr = "your_connection_string_here";

CloudStorageAccount account = CloudStorageAccount.Parse(connStr);

CloudBlobClient client = account.CreateCloudBlobClient();

CloudBlobContainer container = client.
GetContainerReference("myblobcontainer");

container.CreateIfNotExists();

CloudBlockBlob blob = container.
GetBlockBlobReference("myblob");


blob.UploadFromFile(@"C:\Test\Image1.jpg");

}

但是我不知道如何将其应用于网络 api。

我有很多疑问，例如：
1.get和post方法应该是什么？
2. 如何处理客户端的图像获取请求和 post 请求 jquery?
3. put和get request（可能是JSON）用什么方式发送图片？
4. 如何获取图片到img标签？
5.如何识别哪个图片属于哪个post

非常感谢您的帮助。如果我问的不相关或愚蠢，请提前道歉。我还是学生

注意：我使用的是.net core 2.1

Answer 1

我将 Html 页面作为客户端，将 .net 核心 api 作为后端。试试下面的代码：

1.Client边HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        Async file upload with jQuery 
    </title> 

    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
</head> 

<body> 
    <div align="center"> 
        <form method="post" action="" enctype="multipart/form-data"
                id="myform"> 

            <div > 
                <input type="file" id="file" name="file" /> 
                <input type="button" class="button" value="Upload"
                        id="but_upload"> 
            </div> 
        </form> 

        </br>

        <div>
            <input type="button" id="but_display" value ="show all uploaded images">

            <div id="stage"></dev>

        </dev>
    </div>   

    <script type="text/javascript"> 
        $(document).ready(function() { 
            $("#but_upload").click(function() { 
                var fd = new FormData(); 
                var files = $('#file')[0].files[0]; 
                fd.append('file', files); 

                $.ajax({ 
                    url: 'https://localhost:44348/api/blob/', 
                    type: 'post', 
                    data: fd, 
                    contentType: false, 
                    processData: false, 
                    success: function(response){ 
                        if(response != 0){ 
                        alert('file uploaded'); 
                        } 
                        else{ 
                            alert('file not uploaded'); 
                        } 
                    }, 
                }); 
            });

            $("#but_display").click(function() { 
                $.ajax({ 
                    url: 'https://localhost:44348/api/blob/', 
                    type: 'get', 
                    success: function(response){ 
                        $("#stage").empty();
                        response.forEach((url)=>{

                            $("#stage").append("<img src='" + url +"' width='200' >");

                        })
                    }
                });

            });
        }); 
    </script> 
</body> 

</html>

2.backend .net 核心 API :

1).创建一个新的 .net 核心 API 项目。 2).转到 Startup.cs ， ConfigureServices 方法，粘贴下面的代码来替换它：

    services.AddCors(o => o.AddPolicy("MyPolicy", builder =>
    {
        builder.AllowAnyOrigin()
               .AllowAnyMethod()
               .AllowAnyHeader();
    }));
    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
    services.AddSingleton<CloudBlobClient>(sp => { return CloudStorageAccount.Parse("<your storage account connection string>").CreateCloudBlobClient(); });

转到Configure方法。在下面添加一行代码：

app.UseCors("MyPolicy");

3).转到 Controller 文件夹，使用以下代码创建一个控制器 BlobController.cs :

using System;
using System.Collections;
using Microsoft.AspNetCore.Cors;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Azure.Storage.Blob;

// For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860

namespace blobApitest
{

    [Route("api/[controller]")]
    [EnableCors("MyPolicy")]
    public class BlobController : Controller
    {

        private CloudBlobClient cloudBlobClient;


        public BlobController(CloudBlobClient cloudBlobClient)
        {
            this.cloudBlobClient = cloudBlobClient;

        }

        [HttpPost()]
        public OkObjectResult upload([FromForm] IFormFile file)
        {

           string FileName = file.FileName;
           var container = cloudBlobClient.GetContainerReference("<your container name>");
           var blob = container.GetBlockBlobReference(FileName);

           blob.UploadFromStream(file.OpenReadStream());

           return Ok("uploaded");
        }

        [HttpGet()]

        public OkObjectResult GetAll() {

            var bloblist = new ArrayList();

            var container = cloudBlobClient.GetContainerReference("<your container name>");
            SharedAccessBlobPolicy ReadOnly = new SharedAccessBlobPolicy()
            {
                SharedAccessExpiryTime = DateTime.UtcNow.AddHours(24),
                Permissions = SharedAccessBlobPermissions.Read
            };

            var sas = container.GetSharedAccessSignature(ReadOnly);

            foreach (var blob in container.ListBlobs()) {
                bloblist.Add(blob.Uri+sas);
            }
            return Ok(bloblist);
        }

    }  
}

4).运行这个项目。

测试结果：

如果您成功将图像上传到存储，您将收到提醒：

让我们检查一下容器，图片已经上传成功：

单击“显示所有图像”按钮，将显示您容器中的所有图像：

希望对您有所帮助。

使用 .net 核心 Web API 和 jquery 从 azure blob 上传和检索图像

Upload and retrieve images from azure blobs using .net core Web API and jquery

jquery

azure-blob-storage

.net-core-2.1

webapi