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. vue - webpack.dev.conf.js for node-portfinder

    描述:获取当前可用的port. (vue-cli配置好了,一旦端口被占用,报错,再次运行时会打开:8080+1,依次类推...8080+n) 官网地址:https://www.npmjs.com/pa ...

  2. h5移动端百分比

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 实现toggleClass功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. winfrom 底层类 验证码

    效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzgxNjcwOQ==/font/5a6L5L2T/fontsize/400/fill/I ...

  5. 算法笔记_100:蓝桥杯练习 算法提高 三个整数的排序（Java）

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 输入三个数,比较其大小,并从大到小输出. 输入格式 一行三个整数. 输出格式 一行三个整数,从大到小排序. 样例输入 33 88 77 样 ...

  6. 【构建Android缓存模块】（一）吐槽与原理分析

    http://my.oschina.net/ryanhoo/blog/93285 摘要:在我翻译的Google官方系列教程中,Bitmap系列由浅入深地介绍了如何正确的解码Bitmap,异步线程操作以 ...

  7. Java提高合集（转载）

    转载自:http://www.cnblogs.com/pony1223/p/7643842.html Java提高十五:容器元素比较Comparable&Comparator深入分析 JAVA ...

  8. 【php】模板页面展示复选框已选中选项和数据

    写在最开始: 2)我们这里流程是编辑.修改 已经存储的数据. 1.[修改]功能页面: 2.代码:HTML <dt>民宿设施</dt> <dd><label&g ...

  9. C#指南，重温基础，展望远方！（4）表达式

    表达式是在操作数和运算符的基础之上构造而成. 表达式的运算符指明了向操作数应用的运算. 运算符的示例包括 +.-.*./ 和 new. 操作数的示例包括文本.字段.局部变量和表达式. 如果表达式包含多 ...

  10. java类的初始化和构造函数

    本人小白一枚,看java类的初始化的时候好晕的说,我觉着书上尽管说的对.但总认为有些信息没说出来,没说清楚,看了好多文章博客的,如今有些感悟,来小写下总结,也算是为以后再次复习种个好果子. 先摘一下书 ...