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. postgresql 如何导入sql文件

    (1)不能使用pgadmin 执行Copy语句,目前客户端还不支持这种写法. (2)打开sql shell,执行如下操作 \i C:/Users/Peter_Youny/Desktop/ischool ...

  2. Mybatis <Sql>标签

    重复的SQL预计永远不可避免,<sql>标签就是用来解决这个问题的 <sql id="sql1">id,name,age,gender</sql> ...

  3. python处理xls、xlsx格式excle

    一.windows下读取xls格式文件,所需模块xlrd.xlw 1.下载安装包 xlrd地址:https://pypi.org/project/xlrd/#files xlwt地址:https:// ...

  4. 基于vue单页应用的例子

    代码地址如下:http://www.demodashi.com/demo/13374.html 目录结构 src目录 主要的代码目录 components 存放项目组件 router 路由文件 sto ...

  5. log4j 配置（转）

    log4j是干什么的 log4j是Apache的一个开源项目,主要功能是打印日志信息,以各种形式在各种地方花式打印日志. 使用log4j的准备工作 使用log4j就必须要引入其jar包.附上官网地址h ...

  6. HTML-HTML5+CSS3权威指南阅读（一、HTML5与HTML4之间的区别）

    一.HTML5与HTML4之间的区别 1. DOCTYPE 声明 1). HTML4 中为 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

  7. http://blog.sina.com.cn/s/blog_6a01140c0100wimi.html

    http://blog.sina.com.cn/s/blog_6a01140c0100wimi.html

  8. Atitit.md5 实现原理

    Atitit.md5 实现原理 1. 算法流程图2 2. MD5算法过程:2 2.1. 3. 处理分组数据3 3. MD5加密字符串实例5 4. Md5的历史7 4.1.1. MD27 4.1.2. ...

  9. 140726暑期培训.txt

    1.   输入多组数据的时候       while(scanf("%s",s)!=EOF)       while(gets(s)!=NULL)     用gets和scanf不 ...

  10. Myeclipse中 Exploded location overlaps an existing deployment解决办法

    实效解决方法: 项目->properties->MyEclipse->Web->Web Context-root的名字为重命名之后的名字即可 其实这里的Web Context- ...