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. 【大盛】全网首发HTC One/M7 最新本地化TrickDroid9.0/固件升级/永久root/高级,快速设置/稳定,流畅经典ROM

    了解更多请关注:点击打开链接 ROM版本 HTC One/M7_TrickDroid9.0.0 ROM作者 雪狼团队-大盛   http://weibo.com/DaShengdd Android版本 ...

  2. 基于paramiko进行远程执行Linux命令

    直接贴一段代码import paramiko class remote_start(object): def __init__(self,host,username,pwd): self.ssh = ...

  3. 算法笔记_081:蓝桥杯练习 算法提高 矩阵乘法（Java）

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 有n个矩阵,大小分别为a0*a1, a1*a2, a2*a3, ..., a[n-1]*a[n],现要将它们依次相乘,只能使用结合率,求最 ...

  4. ES6 编程风格

    1.块级作用域 (1)使用let代替var 好处:变量应该只在其声明的代码块内有效:var命令存在变量提升效用,let命令没有这个问题. (2)全局常量 在let和const之间,建议优先使用cons ...

  5. MySQL数据库的查询缓冲机制

    MySQL数据库的查询缓冲机制 2011-08-10 11:07 佚名 火魔网 字号:T | T 使用查询缓冲机制,可以极大地提高MySQL数据库查询的效率,节省查询所用的时间.那么查询缓冲机制是怎样 ...

  6. 动态添加easyui 控件

    jquery提供了append,appendTo方法,可以动态添加静态的html文本,在easyui中,要动态添加easyui控件要怎么做呢,下面就来介绍动态添加easyui控件. 使用方法:和添加静 ...

  7. jedis连接集群

    /**        * 集群版        */       @Test       public  void JedisJiuQun()       {           HashSet< ...

  8. 基于委托的C#异步编程的一个小例子 带有回调函数的例子

    我创建的是一个winform测试项目:界面如下: 设置: 下面是代码: using System; using System.Collections.Generic; using System.Com ...

  9. Android studio 使用心得(一)—android studio快速掌握快捷键

    大家都是从eclipse转过来了,所以早就熟悉了eclipse那一套快捷键. File—>settings—>keymap–>选择eclipse就搞定 话是这么说,但是自动化提示的变 ...

  10. Lintcode---线段树构造||

    线段树是一棵二叉树,他的每个节点包含了两个额外的属性start和end用于表示该节点所代表的区间.start和end都是整数,并按照如下的方式赋值: 根节点的 start 和 end 由 build  ...