使用 .net 核心 Web API 和 jquery 从 azure blob 上传和检索图像
Posted
技术标签:
【中文标题】使用 .net 核心 Web API 和 jquery 从 azure blob 上传和检索图像【英文标题】：Upload and retrieve images from azure blobs using .net core Web API and jquery 【发布时间】：2019-12-25 01:21:09 【问题描述】：我正在尝试创建一个博客，您可以在其中发布图片。基本上我想做的是从本地机器中选择图像，然后单击按钮以使用 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");
但是我不知道如何将它应用到 web api。 我有很多疑问，例如： 1. get 和 post 方法应该是什么？ 2. jquery的get请求和post请求如何处理客户端的图片？ 3. 通过 put 和 get 请求（可能是 JSON）以什么方式发送图像？ 4. 如何将图片添加到 img 标签中？ 5.如何识别哪个图片属于哪个帖子 非常感谢您的帮助。如果我问的内容不相关或愚蠢，请提前道歉。我还是个学生。 注意：我使用的是 .net core 2.1
【问题讨论】：
这里有documentation，您可以使用 javascript 调用 Azure API。如果您有任何问题，我建议您遵循这些并提出更具体的问题:-) @SimplyGed 感谢您的回复。我浏览了您链接的文档，但是我需要从服务器端处理上传和检索。 也许这对你有帮助。 docs.microsoft.com/en-us/rest/api/storageservices/… 嗨@DuskHare，怎么样？你的问题解决了吗？ 【参考方案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.backend .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 上传到存储，您将收到警报：
让我们检查容器，图像已成功上传：
单击显示所有图像按钮，将显示容器中的所有图像：
希望对您有所帮助。
【讨论】：
在 blob 控制器中，ListBlobs() 中的每个循环都有一个错误。它说 CloudBlobContainer 不包含 ListBlobs 的定义。当我将其更改为 ListBlobsSegmentedAsync 时，会出现错误，因为每个语句都不能对 Task以上是关于使用 .net 核心 Web API 和 jquery 从 azure blob 上传和检索图像的主要内容，如果未能解决你的问题，请参考以下文章
ASP.NET 核心 Web API 和 Angular 客户端中的外部身份验证
text 使用ASP.NET Core 2 Web API，Angular 5，.NET核心身份和Facebook登录进行JWT身份验证
带有 EF Core 更新实体的 ASP.Net 核心 Web Api 如何
使用.net核心Web API和jquery从天蓝色斑点中上传和检索图像