学习笔记《七牛云》

本人在做项目中的上传文件使用七牛云的JSSDK，碰到点小问题，解决后加以总结整理，方便以后查看。

上传多个文件重名问题

此处欲实现上传文件功能，单个文件上传没有问题，但是上传多个文件出现问题，上传超过一个文件时上传失败，errTip报错为上传文件已存在。

在遇到这个问题之前，我本以为上传多个文件从FilesAdded开始到FileUploaded上传结束是一个文件一个文件逐个上传，所以在FilesAdded的时候给文件重新命名，但是运行时报错了，碰到这个问题后我意识到我这个认为太过主观，并不清楚上传的流程。

如下为JSSDK部分代码的init部分，

init: {
    'FilesAdded': function (up, files) {
        // 文件添加进队列后，处理相关的事情
        var fileName = new Date().getTime();
        uploader.start();
    },
    'BeforeUpload': function (up, file) {
         // 每个文件上传前，处理相关的事情
         alert("Before it upload.")
    },
    'UploadProgress': function (up, file) {
        // 每个文件上传时，处理相关的事情
        alert("It's uploading.")
    },
    'UploadComplete': function () {
        //队列文件处理完毕后，处理相关的事情
        alert("Upload finish.")
    },
    'FileUploaded': function (up, file, info) {
       // 每个文件上传成功后，处理相关的事情 
       // 其中info是文件上传成功后，服务端返回的json，形式如：
       // {
           // "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
           // "key": "gogopher.jpg"
       // }
       // 查看简单反馈
       var domain = up.getOption('domain');
       var res = parseJSON(info);
       var sourceLink = domain + res.key; 获取上传成功后的文件的Url 
        alert("It's done.")
    },
    'Error': function (up, err, errTip) {
        //上传出错时，处理相关的事情
        console.log(errTip);
    },
    'Key': function(up, file) {
    // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
    // 该配置必须要在unique_names: false，save_key: false时才生效
    //获取文件扩展名
        alert("It's key.")
        var name = file.name;
        var point = name.lastIndexOf(".");
        var type = name.substr(point);
        return fileName+type;
    }}

由于要重新生成文件名，“Key”对象的function是必须要配置的，而且有回调的参数file，此处与FilesAdded的参数files有区别，猜想是添加文件后，文件都在FilesAdded队列中，再去逐个执行后面的方法，于是我就在上面代码中用alert断点，看看到底是什么样的执行顺序，最终确定Key、BeforeUpload、UploadProgress、UploadComplete、FileUploaded，此处文件上传至七牛云，流程执行完毕。

如下是其他参数，

var uploader = Qiniu.uploader({ 
    runtimes: 'html5,flash,html4', // 上传模式，依次退化 
    browse_button: 'pickfiles', // 上传选择的点选按钮，必需 
    // 在初始化时，uptoken，uptoken_url，uptoken_func三个参数中必须有一个被设置 
    // 切如果提供了多个，其优先级为uptoken > uptoken_url > uptoken_func 
    // 其中uptoken是直接提供上传凭证，uptoken_url是提供了获取上传凭证的地址，如果需要定制获取uptoken的过程则可以设置uptoken_func 
    // uptoken : '', 
    // uptoken是上传凭证，由其他程序生成 
    // uptoken_url: '/uptoken', 
    // Ajax请求uptoken的Url，强烈建议设置（服务端提供） 
    // uptoken_func: function(file){ // 在需要获取uptoken时，该方法会被调用 
        // // do something 
        // return uptoken; 
    // }, 
    get_new_uptoken: false, // 设置上传文件的时候是否每次都重新获取新的uptoken 
    // downtoken_url: '/downtoken', 
    // Ajax请求downToken的Url，私有空间时使用，JS-SDK将向该地址POST文件的key和domain，服务端返回的JSON必须包含url字段，url值为该文件的下载地址 
    // unique_names: true,     // 默认false，key为文件名。若开启该选项，JS-SDK会为每个文件自动生成key（文件名）
    // save_key: true,     // 默认false。若在服务端生成uptoken的上传策略中指定了sava_key，则开启，SDK在前端将不对key进行任何处理 
    domain: '', // bucket域名，下载资源时用到，必需。domain为七牛空间对应的域名，选择某个空间后，可在内容管理->外链接默认域名 查看获取
    container: 'container',     // 上传区域DOM ID，默认是browser_button的父元素 
    max_file_size: '100mb',     // 最大文件体积限制 
    flash_swf_url: 'path/of/plupload/Moxie.swf',     //引入flash，相对路径 
    max_retries: 3,     // 上传失败最大重试次数 
    dragdrop: true,    // 开启可拖曳上传 
    drop_element: 'container',    // 拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传 
    chunk_size: '4mb',     // 分块上传时，每块的体积 
    auto_start: true,     // 选择文件后自动上传，若关闭需要自己绑定事件触发上传 
    multi_selection: false,    // 默认为true。若为false则一次只能选择一个文件
    //x_vars : { 
        // 查看自定义变量 
        // 'time' : function(up,file) { 
            // var time = (new Date()).getTime(); 
            // do something with 'time' 
            // return time; 
        // }, 
        // 'size' : function(up,file) { 
            // var size = file.size; 
            // do something with 'size' 
            // return size; 
        // }
    //}, 
    init: {}
});// domain为七牛空间对应的域名，选择某个空间后，可通过 空间设置->基本设置->域名设置 查看获取// uploader为一个plupload对象，继承了所有plupload的方法