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:fakepathxxxxx”,而不是文件真实的路径。

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

    问题描述:同上。

原文地址:https://www.cnblogs.com/foxNike/p/5777504.html