云计算之路：博客后台图片上传切换至“又拍云”以及新版图片上传功能上线

云计算之路正在一步一步地向前迈进。一边在全面评估“阿里云”，一边用“又拍云”解决了让人头疼的图片存储问题。

我们的解决方案是：用户上传图片时，在将图片文件保存至我们的服务器的同时，会调用又拍云的API，将图片上传至又拍云的服务器。返回的图片地址用的是我们自己的域名，只不过通过DNS的“CNAME解析”解析至又拍云的服务器，所以用户访问时实际是通过又拍云的服务器获取图片。

这样做的好处是：既解决了图片文件的异地备份问题，又让图片有了更快的访问速度（又拍云对图片进行了CDN加速）。

风险评估：假如又拍云的服务器出现问题怎么办？因为我们自己的服务器有同样的图片文件，出现问题时只要改一下DNS解析就能很快恢复正常。

代码分享：

又拍云提供的是REST风格的API，开发文档中只有PHP的调用示例代码，我们是用ASP.NET MVC进行调用的，所以用C#写了调用代码，这里分享出来，代码如下：

using System;
using System.IO;
using System.Net;
namespace UpYunApi
{
    public class Bucket
    {
        const string Host = "v0.api.upyun.com";
        const string Username = "又拍云用户名";
        const string Password = "又拍云密码";
        const string AccessDomain = "http://访问图片的域名";

        public string BucketName { get; set; }
        private string _bucketApiUri;

        public Bucket(string bucketName)
        {
            BucketName = bucketName;
            _bucketApiUri = string.Format("http://{0}/{1}", Host, bucketName);
        }

        public string PutFile(string filePath, Stream inputStream)
        {
            var webRequest = CreateWebRequest(_bucketApiUri + filePath, "put");
            webRequest.Headers.Add("Mkdir", "true");
            using (var requestStream = webRequest.GetRequestStream())
            {
                inputStream.CopyTo(requestStream);
            }
            var response = GetResponse(webRequest);
            if (string.IsNullOrEmpty(response))
            {
                return AccessDomain + filePath;
            }
            else
            {
                return response;
            }
        }

        private WebRequest CreateWebRequest(string requestUri, string method)
        {
            var webRequest = WebRequest.Create(requestUri);
            webRequest.Method = method;
            webRequest.Credentials = new NetworkCredential(Username, Password);
            return webRequest;
        }

        private string GetResponse(WebRequest webRequest)
        {
            using (var response = webRequest.GetResponse())
            {
                using (var sr = new StreamReader(response.GetResponseStream()))
                {
                    return sr.ReadToEnd();
                }
            }
        }
    }
}

ASP.NET MVC Controller中的调用示例代码：

using (var inputStream = Request.InputStream)//这行代码仅支持非IE浏览器及IE10标准模式
{
    var bucket = new Bucket("cnblogsimages");//cnblogsimages为又拍云上对应的空间名称
    return bucket.PutFile(filePath, inputStream);//filepath为图片路径
}

在切换到又拍云的同时，我们也改进了一下图片上传功能（目前只针对TinyMCE编辑器），采用ajax进行图片上传，ajax组件用的是Fine Uploader（https://github.com/valums/file-uploader）。

现在在博客后台TinyMCE编辑器中点击“上传图片”的按钮，会出现下面的界面（如未出现，请按Ctrl+F5）：

点击“上传本地图片”后选择图片就会自动上传。

而且支持拖放上传图片，见下图：

拖放上传图片功能，Chrome与Firefox都测试通过，IE只有IE10标准模式才支持，博客后台目前是IE9标准模式，需要手动修改IE10的Document Mode。

如果您在使用新版图片上传功能时遇到问题，麻烦您立即向我们反馈！

另外，Live Writer上传图片目前还没有切换至又拍云。