標籤：als man main adf ++ control 請求 sem position
1. 建立1個Azure帳號，登入之後建立1個AzureStorage。左下方點Manage Access會看到Primary Access Key和Storage Account，記住它們的位置，等下須要配置到Web.config中。
2. 建立Web.Api project，上傳圖片的代碼：
[HttpPost] public async Task<HttpResponseMessage> PostFile() { HttpRequestMessage request = Request; if (!request.Content.IsMimeMultipartContent()) { throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType); } string root = System.Web.HttpContext.Current.Server.MapPath("~/App_Data/uploads"); var provider = new MultipartFormDataStreamProvider(root); var task = await request.Content.ReadAsMultipartAsync(provider); string accountName = "your account stro"; string accountKey = "your key"; var creds = new StorageCredentials(accountName, accountKey); var account = new CloudStorageAccount(creds, useHttps: true); CloudBlobClient client = account.CreateCloudBlobClient(); CloudBlobContainer sampleContainer = client.GetContainerReference("samples"); sampleContainer.CreateIfNotExists(); sampleContainer.SetPermissions(new BlobContainerPermissions() { PublicAccess = BlobContainerPublicAccessType.Blob }); foreach (MultipartFileData file in provider.FileData) { var name = file.Headers.ContentDisposition.FileName.Replace("\"",""); CloudBlockBlob blob = sampleContainer.GetBlockBlobReference(name); using (var filestream = File.OpenRead(file.LocalFileName)) { blob.UploadFromStream(filestream); } } return Request.CreateResponse(HttpStatusCode.OK); } [HttpGet] public IEnumerable<string> AzureImageUrls() { HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*"); var connStr = ConfigurationManager.AppSettings["AzureImageStorage"]; var accnt = CloudStorageAccount.Parse(connStr); var client = accnt.CreateCloudBlobClient(); var blobs = client.GetContainerReference("samples" /*container name*/).ListBlobs(); var urls = blobs.Select(blob => blob.Uri.AbsoluteUri).ToList(); return urls; }
首先，在上傳時，須要設定這行代碼：
PublicAccess = BlobContainerPublicAccessType.Blob假設不設定的話，預設的訪問許可權是不能夠在用戶端直接訪問Blob圖片的。因而顯示不出圖片。
其次，在用戶端擷取URI時，API中須要設定這行代碼：
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
由於跨域做AJAX預設是不同意的，這行代碼的實現方式為CORS(Cross Origin Resource sharing)，另外還有JSONP能夠做到，可是須要server端返回js函數的調用代碼，有關跨域AJAX請求，詳細能夠參見這篇不錯的文章：
https://jvaneyck.wordpress.com/2014/01/07/cross-domain-requests-in-javascript/
<appSettings> <add key="AzureImageStorage" value="DefaultEndpointsProtocol=http;AccountName=name;AccountKey=yourkey" /> </appSettings>須要注意的地方就是。value中不同意出現空格。這個連結字串是標準形式，很多其它azure連結字串，能夠參照：
https://www.connectionstrings.com/windows-azure/
4. 推薦下載cloud berry這樣的相似FTP的管理工具。方便查看上傳的圖片，假設傳錯了能夠進行刪除：
http://www.cloudberrylab.com
<html><script src="jquery-2.1.1.js"></script><form method="post" enctype="multipart/form-data" action="http://localhost:55006/api/values/postfile"><input type="file" name ="uploadfile" ></input><input type="submit" value="submit" ></input><ul class="imgs"></ul></form><script>$(document).ready(function(){$.get("http://localhost:55006/api/values/AzureImageUrls", function(data, status){var html = "";for(var i = 0;i < data.length; i++){var d = data[i];html += "<img src=‘" + d + "‘ width=‘300px‘ height=‘300px‘/>";}$(".imgs").html(html); });});</script></html>
Windows Azure 系列-- 使用Azure + Web API實現圖片上傳
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
