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. kindeditor 图片上传插件

    富文本编辑器,kindeditor是比较好用的一款.需要的功能都有,文档.demo也详细.有什么功能去官网看一眼就好. 官网:http://kindeditor.net/ 一些好用的如图片上传,kin ...

  2. Android 如何增大开机铃声 M

    前言          欢迎大家我分享和推荐好用的代码段~~ 声明          欢迎转载,但请保留文章原始出处:          CSDN:http://www.csdn.net        ...

  3. Android 网络请求框架Retrofit

    Retrofit是Square公司开发的一款针对Android网络请求的框架,Retrofit2底层基于OkHttp实现的,OkHttp现在已经得到Google官方认可,大量的app都采用OkHttp ...

  4. 【FinancialKnowledge】拨备

    一句话: 银行拨备就是银行贷款损失减值准备的俗称,其相当于为承担风险和损失的金融资产计提的准备金 通俗易懂的解释见:https://wallstreetcn.com/articles/3307725

  5. Sphinx-实战

    配置完成后, 有了数据源.索引文件存储位置等, 便可以使用 indexer 工具创建索引, 收集要被检索的数据 -c 指定配置文件 默认使用 etc/sphinx.conf --all 对所有索引重新 ...

  6. 关于同一线程两次调用EnterCriticalSection的测试

    #include "stdafx.h" #include <iostream> using namespace std; #include <windows.h& ...

  7. 用nodepad++生成导入数据的SQL

    在工作中经常要往数据库里导入数据,如果是在本地,可以用SQL SERVER自带的工具 直接往表里导入或者 用ssis 导入 线上的数据库由dba负责,作为开发不能直接操作,需要程序员来生成sql语句, ...

  8. ⽤运营的思路来做无线产品測试-第13届BQConf上的分享

    ⽤运营的思路来做无线产品測试,在2014.10.25.第13届B'QConf(北京软件质量大会)上分享的一个主题.主要是关于京东无线測试的一些实践,包含android和ios的代码覆盖率.无线的接口自 ...

  9. jQuery改变label/input的值，改变class，改变img的src

    jQuery改变label/input的值.改变class,改变img的src jQuery改变label的值: $('#aID').text("New Value"); jQue ...

  10. Atitit 《摩奴法典》overivew 读后感 不是由国王 颁布的，而是 僧侣编制

    Atitit <摩奴法典>overivew 读后感 不是由国王 颁布的,而是 僧侣编制 1. <摩奴法典>是印度最古老的一部法律文献.该法典不是由国王或立法机关制定颁布的,而是 ...