博客
关于我
云计算之路:博客后台图片上传切换至“又拍云”以及新版图片上传功能上线
阅读量:427 次
发布时间:2019-03-06

本文共 2719 字,大约阅读时间需要 9 分钟。

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

我们的解决方案是:用户上传图片时,在将图片文件保存至我们的服务器的同时,会调用又拍云的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()。

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

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

而且支持拖放上传图片,见下图:

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

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

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

转载地址:http://vhhkz.baihongyu.com/

你可能感兴趣的文章
nginx+Tomcat性能监控
查看>>
nginx+uwsgi+django
查看>>
nginx+vsftp搭建图片服务器
查看>>
Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流
查看>>
nginx-vts + prometheus 监控nginx
查看>>
Nginx/Apache反向代理
查看>>
Nginx: 413 – Request Entity Too Large Error and Solution
查看>>
nginx: [emerg] getpwnam(“www”) failed 错误处理方法
查看>>
nginx: [emerg] the “ssl“ parameter requires ngx_http_ssl_module in /usr/local/nginx/conf/nginx.conf:
查看>>
nginx: [error] open() “/usr/local/nginx/logs/nginx.pid“ failed (2: No such file or directory)
查看>>
nginx:Error ./configure: error: the HTTP rewrite module requires the PCRE library
查看>>
Nginx:objs/Makefile:432: recipe for target ‘objs/src/core/ngx_murmurhash.o‘解决方法
查看>>
nginxWebUI runCmd RCE漏洞复现
查看>>
nginx_rtmp
查看>>
Vue中向js中传递参数并在js中定义对象并转换参数
查看>>
Nginx、HAProxy、LVS
查看>>
nginx一些重要配置说明
查看>>
Nginx下配置codeigniter框架方法
查看>>
Nginx与Tengine安装和使用以及配置健康节点检测
查看>>
Nginx中使用expires指令实现配置浏览器缓存
查看>>