使用JS+plupload直接批量上传图片到又拍云
论坛或者贴吧经常会需要分享很多图片，上传图片比较差的做法是上传到中央服务器上，中央服务器再转发给静态图片服务器。而这篇文章讲介绍如何使用plupload对上传过程进行优化，并绕过服务器直接批量上传图片到又拍云上的方法。本文集中会讲到以下几个重点：
图片的本地压缩
一般在网页中浏览的图片质量需求不高，记得当初高中上课学PS，老师说网上的图片分辨率设72就好了，打印的图片的话得设300。所以用户在上传一张很大的照片时，比较好的做法是现在用户的客户端本地压缩好这张图片，并把压缩后较小的图片上传，既不影响浏览效果，同时也能加快上传速度，减小服务器的负担。
图片的本地压缩功能在plupload中是支持的，只要在初始化它的时候传入一个resize参数就好了。其中，宽度和高度可以根据实际情况设置，而quality是比较重要的一个参数，顾名思义，这个值设置得越小，图片越小，但显示的质量也会越差，这个就需要你自己权衡一下啦。
var policy = window.btoa(JSON.stringify(options));
// 从 UPYUN 用户管理后台获取表单 API
var form_api_secret = '1+JY2ZqD5UVfw6hQ8EesYQO50Wo=';
// 计算签名
var signature = md5(policy + '&' + form_api_secret);
plupload的配置
如何使得plupload可以配合又拍云的HTTP FORM API，着实让我头疼了一番。在查看plupload的文档中，无意中的发现却让我看到了曙光，Upload to Amazon S3这个链接吸引了我。Amazon S3的全称是Amazon Simple Storage Service，它提供的云存储服务多多少少和又拍云有些相似。
于是根据这篇文章中关于浏览器端配置的介绍，我琢磨出了上传到又拍云所需要的配置。其实说起来也很简单，主要就是对url和multipart_params两个参数进行配置。下面的例子中的options.bucket、policy和signature直接使用上一节计算出来的值。
var uploader = new plupload.Uploader({
...
url : 'http://v0.api.upyun.com/' + options.bucket,
multipart_params: {
'Filename': '${filename}', // adding this to keep consistency across the runtimes
'Content-Type': '',
'policy': policy,
'signature': signature,
},
...
});
总结
如此这般，终于实现了通过plupload绕过服务器，向又拍云批量上传图片了。plupload真是一个很强大的库，不过它对商业使用可以需要收费的哦，具体还是到它的官网上去了解吧！
是不是很简单呢，主要是思路很不错，值得我们去学习，有问题请跟我留言，大家共同进步
作者：喵哥笔记
