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;

        }

包括了两个Action，PostFile和AzureImageUrls，前者用来接收post过来的文件对象，后者用于从Azure中获取uri返回到客户端。

首先，在上传时，须要设置这行代码：

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/

3. web config 

 <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

5. 客户端html实现：

<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实现图片上传的更多相关文章

  1. 调用Web API将文件上传到服务器的方法（.Net Core）

    最近遇到一个将Excel通过Web API存到服务器的问题,其中涉及到Excel的读取.调用API.Web  API怎么进行接收. 一. Excel的读取.调用API Excel读取以及调用API的代 ...

  2. ASP.NET Web API编程——文件上传

    首先分别介绍正确的做法和错误的做法,然后分析他们的不同和错误之处,以便读者在实现此功能时可避开误区 1正确的做法 public class AvaterController : BaseApiCont ...

  3. C#开发BIMFACE系列4 服务端API之源上传文件

    在注册成为BIMFACE的应用开发者后,要能在浏览器里浏览你的模型或者获取你模型内的BIM数据, 首先需要把你的模型文件上传到BIMFACE.根据不同场景,BIMFACE提供了丰富的文件相关的接口. ...

  4. web api 2.0 上传文件超过4M时，出现404错误

    客户端代码 string path = "C:\\text.txt"; WebClient client = new WebClient(); Uri _address = new ...

  5. C# WEB.API 多图上传

    using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Ne ...

  6. 发现一个微博图床API和图片上传代码

    网上寻到一款微博图床的插件,然后顺藤摸瓜找到了原作者的API代码. API文件: <?php /** * 上传图片到微博图床 * @author Youngxj & mengkun &a ...

  7. Wince 6.0适用 .NET 使用HttpRequest的Post上传文件，服务端的Web API接收Post上传上来的文件 代码

    //调用的示例 private string fileName = "InStorageData.csv"; string filePath = parentPath + Comm ...

  8. python web开发——c5 图片上传 flask-uploads 云储存sdk

    坑1:上传图片时,py文件中@app.route('/upload/',methods = {'post','get'})中upload后如有斜杠,则postman中发送post时的网址中也要为upl ...

  9. Asp.Net Core Web Api图片上传(一)集成MongoDB存储实例教程

    Asp.Net Core Web Api图片上传及MongoDB存储实例教程(一) 图片或者文件上传相信大家在开发中应该都会用到吧,有的时候还要对图片生成缩略图.那么如何在Asp.Net Core W ...

随机推荐

  1. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-为什么无法打开官方范例的项目，打开tszip文件时提示尝试越过结尾怎么办

    打开新的解决方案,找到tszip文件   提示错误Advanced Setting时越过结尾   到这里一般VS会卡死   但是我们已经可以得到解压出来的文件夹,其中包含PLC的完整项目文件夹,可以新 ...

  2. 4CIF是什么意思

    QCIF:176X144 CIF:352X288 2CIF:704X288 DCIF:584X384 4CIF:704X576 CIF是常用的标准化图像格式(Common Intermediate F ...

  3. k8s的Ingress

    一.Ingress简介 外部访问集群内的服务,可以通过NodePort或LoadBalancer(这通常由云服务商提供),还可以通过ingress访问. Ingress包含两个组件Ingress Co ...

  4. 如何利用ps去批量完成一套任务

    作为前端开发人员,不说设计你会不会,ps作为一个工具来说,前端开发人员还是要熟悉才行的 做了一个项目,客户自己上传了图片,他表示上传非常慢,我们表示不解,为何那么慢,网络问题吗,经过看了她的图片,发现 ...

  5. ES6常用对象操作整理

    const 简单类型数据常量 // const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址不得改动.对于简单类型的数据(数值.字符串.布尔值),值就保存在变量指向的那个内存地址,因 ...

  6. 关于vector push_back()与其他方式读取数据的效率对比（转）

    引言: 在读取大量数据(数组)时,使用vector会尽量保证不会炸空间(MLE),但是相比于scanf的读取方式会慢上不少.但到底效率相差有多大,我们将通过对比测试得到结果. 测试数据:利用srand ...

  7. 执行hbm2java工具和hbm2ddl工具

    下面内容整理自<精通hibernate> 第二版 Hibernate提供了从映射文件到Java源码的转换工具,名为hbm2java工具,能够利用ANT工具来执行它. <span st ...

  8. TCP 的那些事儿（上） SACK

    http://blog.csdn.net/woxiaozhi/article/details/27328557 文章太好了,转载过啦 这篇文章分为上下两篇  确实不错  所以存在这里收藏 TCP是一个 ...

  9. 编译ORBSLAM2 build_ros.sh，实现kinect2在ROS环境下运行ORBSLAM2

    //編譯ORBSLAM2 build_ros.sh參考:“http://www.cnblogs.com/bigzhao/p/6635770.html”1.source ~/.bashrc出現問題:ct ...

  10. discuz 安装 文件不可写

    discuz安装过程中,系统会自动检查环境及文件目录权限,当出现目录不可写: 这个时候只需要用ftp修改文件夹权限就可以了