七牛上传图片使用心得

使用七牛进行图片、视频的上传，简单又高效。官方javascript-sdk地址：developer.qiniu.com/kodo/sdk/12…

常用功能有：

1.多图或单图上传

2.限制上传格式、大小

3.上传失败，重新上传

4.上传过程中终止上传

5.上传进度计算

引入qiniu.js后，配置讲解

var uploader = Qiniu.uploader({
    disable_statistics_report: true,
    makeLogFunc: 1,
    runtimes: 'html5,flash,html4',
    browse_button: 'pickimg',
    container: 'btnlist',
    max_file_size: '20mb',
    dragdrop: false,
    chunk_size: '4mb',
    multi_selection: true,
    uptoken_url: '/management/upload/getqiniuuptoken.do',//token获取地址
    uptoken_func:function(file){//如果token获取地址不一致，使用
        var uptoken = "";
        var url = "";
        if(file.type.indexOf("video")>-1 || self.videoType.indexOf(file.name.split('.')[1]) > -1){         // 添加视频token处理
            url = "";
            self.uploader.domain = '';
        }
        if(file.type.indexOf("image")>-1){
            url = "";
            self.uploader.domain = '';
        }
        $.ajax({
            url: url,
            dataType: "json",
            type: "get",
            async: false,
            success: function (data) {
                uptoken = data.uptoken;
            },
            error: function (a, b) {

            }
        });
        return uptoken;
    },
    unique_names: false,
    save_key: false,
    max_retries: 0,                     // 上传失败最大重试次数
    domain: 'http://you2.autoimg.cn/',
    get_new_uptoken: true,
    auto_start: true,//文件选择完毕后自动上传
    log_level: 0,
    init: {
        'FilesAdded': function (up, files) {
            self.processPercent = 0;
            self.uploadImgList ={ids:[],files:[]};

            self.uploadImgList.files = files;

            // 显示上传进度
            self.showUploadProcess = true;

            // 上传的图片数量
            self.uploadImgNum = files.length;
            imgMum = files.length;



            plupload.each(files, function (file) {
                if(file.type=='image/jpeg'||file.type=='image/jpg'||file.type=='image/png'||file.type=='image/bmp'){

                }else{
                    alert("文件格式不正确，请选择上传jpg、png、bmp格式图片");
                    up.removeFile(file);
                    self.showUploadProcess = false;
                    return false;
                }
            });

        },
        'BeforeUpload': function (up, file) {

        },
        'FileUploaded': function (up, file, info) {//单张图片上传成功处理
            if (info.status == "200") {
                var imgUrl = "http://you2.autoimg.cn/"+JSON.parse(info.response).key;
                self.uploadImgList.ids.push(imgUrl);
                imgMum--;

            }
            if(imgMum == 0){
                self.saveImg(self.uploadImgList.ids.join(','));
            }
        },

        'UploadComplete':function(up, file, info){

        },
        'Error': function (up, err, errTip) {

        },
        'Key': function (up, file) {
            // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
            // 该配置必须要在 unique_names: false , save_key: false 时才生效
            var uuid = utils.uuid();
            var key = "_autohomecar__zhouyouji/" + uuid + ".jpg";
            return key;
        },
        'UploadProgress': function (up, file) {

            var files = up.files;
            var uploaded = 0;
            for(var i=0;i<files.length;i++){

                uploaded += files[i].percent;
            }

            self.processPercent = parseInt(uploaded/(files.length*100)*100);

        }
    }
});
复制代码

注意点：

1.实现上传终止，七牛配置中有stop方法，它支持暂停上传，再次开启start上传后会继续上传，并不能实现终止结束，即使删除up中的files，上传一旦开始就无法撤销，所以我的实现方案是利用destroy将实例销毁，销毁后再重新绑定，之前的图片就会终止上传。

2.上传按钮的位置如果有变化（如点击后按钮消失），由于七牛的实现方案是在上传按钮的位置放置了一个div，div里有真正上传使用的input，所以即使将自己的上传按钮隐藏，点击该位置依然会触发上传。建议将真正的上传按钮放置到边缘位置，触发方式采用手动click

3.UploadProgress中可以得到已上传文件的上传进度百分比，如果想得到总的上传进度，需要自己计算下

4.重新上传是在qiniu.js中添加自定义方法retryUploadFile：调用 uploader.retryUploadFile(fileId);

retryUploadFile: function(id){
    var file, count = 0, i;
    this.state = plupload.STARTED;
    // Find first QUEUED file
    if(files) {
        for (i = 0; i < files.length; i++) {
            if (files[i].id == id) {
                file = files[i];
                if (this.trigger("BeforeUpload", file)) {
                    file.status = plupload.UPLOADING;
                    this.trigger("UploadFile", file);
                }
            }
        }

        // All files are DONE or FAILED
        //if (count == files.length) {
            if (this.state !== plupload.STOPPED) {
                this.state = plupload.STOPPED;
                this.trigger("StateChanged");
            }
            this.trigger("UploadComplete", files);
        //}
    }
}
复制代码