雲計算之路：博客后台圖片上傳切換至“又拍雲”以及新版圖片上傳功能上線

雲計算之路正在一步一步地向前邁進。一邊在全面評估“阿里雲”，一邊用“又拍雲”解決了讓人頭疼的圖片存儲問題。

我們的解決方案是：用戶上傳圖片時，在將圖片文件保存至我們的服務器的同時，會調用又拍雲的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上傳圖片目前還沒有切換至又拍雲。