2

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

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");

}

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

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

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

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

4

1 回答 1

1

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

1.客户端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.后端.net核心API：

1）。创建一个新的 .net core 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) .运行这个项目。

测试结果 ：

如果您成功将 imgae 上传到存储，您将收到警报： 在此处输入图像描述

让我们检查容器，图像已成功上传： 在此处输入图像描述

单击显示所有图像按钮，将显示容器中的所有图像： 在此处输入图像描述

希望能帮助到你 。

于 2019-12-25T05:48:03.723 回答