upload To upyun

upyun请求路径：

http://v0.api.upyun.com/ + 存储空间名 + file=@ + 文件名 + policy=<policy> + signature=<signature>


文件保存的路径由save-key参数决定，它有5种类型。

示例：

　　所以，如果要求保存的图片路径为：/upload/年月日/time.类型
则save-key需要设置为：/upload/ + me.createTime() + / + tp + ext(从左到右依次为相对路径、获取当前时间的函数、格林尼治时间（毫秒）、文件类型);
这样一来，在我们的存储空间bucket中，文件以/upload/...的形式存储下来。

存储之后的访问路径为：http://存储空间.b0.upaiyun.com/文件路径

---

2016-08-25 14:23:06
　　目标：借助plupload将图片上传到又拍云

　　首先需要了解又拍的 HTTP FORM API

upyun上的配置

　　其中有policy、signature两个参数需要注意。
　　policy：表示上传请求相关的参数，例如保存路径，文件类型，预处理结果等值。
　　signature：用于安全校验。
　　以上两个参数处于安全考虑需要在服务器端完成，不过在前端用js也是可以的（安全性差一些）。
　　配置方式如下：

//参考代码
var options = {
    'bucket': 'demonstration',//保存所上传的文件的又拍云空间名
    'save-key': '/test/filename.txt',//保存路径
    'expiration': Math.floor(new Date().getTime() / 1000) + 86400//请求的过期时间
};
//以上三个属性为必选项
//其他可选属性参见upyun官方文档
//http://docs.upyun.com/api/form_api/#_1

　　然后是policy的算法，这里使用官方提供的policy算法。分两步

1. 将参数转换为json字符串:例如：{"bucket":"demobucket","expiration":1409200758,"save-key":"/img.jpg"}。
2. 将第一步得到的字符串进行base64编码，得到的结果就是我们需要的policy了。

接下来是signature的算法，参考来源同样是官方。计算它需要用到三个参数，分别是policy字符串、表单验证密钥（form_api_secret）。总体分三步：

1. 生成policy字符串。
2. 将policy字符串与表单验证密钥通过&符拼接。
3. 将第二步得到的字符串计算md5，得到的结果就是signature。

　　补充知识：

　　对字符串进行base64编码的方式：

　　window.btoa(...);

　　描述：将ascii字符串或二进制数据转换成一个base64编码过的字符串,该方法不能直接作用于Unicode字符串。

　　对base64编码过的字符串进行解码的方式：

　　window.atob(...);

　　描述：对接受到的base64数据进行解码,得到原数据。

至此，upyun部分的配置就结束了。我们还需要配置plupload部分的参数。

plupload配置

　　plupload的配置示例如下

var uploader = new plupload.Uploader({
    ...
    url : 'http://v0.api.upyun.com/' + options.bucket, //上传地址，其中‘http://v0.api.upyun.com/’为又拍云FORMAPI的基本域名，bucket为upyun空间名
    multipart_params: {
        'Filename': '${filename}', // 与runtime保持一致
        'Content-Type': '',
        'policy': policy,
        'signature': signature,
    },
    ...
});

 

　　plupload的配置参数中的runtime属性可以指定该插件使用哪种方法上传，它的值有[“flash”,"sliverlight","html4","html5"]等多种。在程序执行时，会根据浏览器版本使用相应的方式。

 相关兼容问题与bug

　　1.IE8下如何通过js获取文件真实路径，以达到预览图片的目的？

　　　　问题描述：IE8上传文件时，获取<input id="file" type="file" />元素选择的文件路径,在控制台输出document.getElementById("file").value()的值，程序运行时，会发现控制台输出的是“"C:\fakepath\xxxxx”，而不是文件真实的路径。

　　2.input file change事件响应value值的改变，在第一次有效，提交表单之后再次点击则无效，不响应节点value值的变化。

　　　　问题描述：同上。