我将 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 上传到存储，您将收到警报：
让我们检查容器，图像已成功上传：
单击显示所有图像按钮，将显示容器中的所有图像：
希望对您有所帮助。