mkl_power_box/js/upload.js

//大于 4M 时可分块上传，小于 4M 时直传,设置分块大小（分块上传时，支持断点续传）
var BLOCK_SIZE = 4 * 1024 * 1024;


//token
var token;
var bucket = "makalu-img";
var domain = "http://1111.makalu.cc";
//获取token的授权
$.get("/mkl/api/getToken", function(data){
    token = data;
});


//上传的文件信息
var file;
//上传对象
var observable;
//上传对象
var subscription;


//上传文件的名称
var key;
//配置信息
var config = {
    //是否使用 cdn 加速域名：true 表示使用，默认为 false
    useCdnDomain: true,
    //是否禁用日志报告，为布尔值，默认为false
    disableStatisticsReport: false,
    //选择上传域名区域
    /*
     qiniu.region.z0: 代表华东区域
     qiniu.region.z1: 代表华北区域
     qiniu.region.z2: 代表华南区域
     qiniu.region.na0: 代表北美区域
     qiniu.region.as0: 代表东南亚区域
     */
    region: qiniu.region.z0
};



var observer = {
    next(res){
        console.log(res);
        // 接收上传进度信息
        /*
         total.loaded: number，已上传大小，单位为字节。
         total.total: number，本次上传的总量控制信息，单位为字节，注意这里的 total 跟文件大小并不一致。
         total.percent: number，当前上传进度，范围：0～100。
         */

        $("#loaded").html(res.total.loaded);
        $("#percent").html((res.total.percent).toFixed(2)+"%");
        $("#percent2").html((res.total.percent).toFixed(2)+"%");
        $("#loading").css("width",(res.total.percent).toFixed(2)+"%")
        if(res.total.percent == 100){
            $("#uploadState").val(2)
            $("#loading").css("background","green")
        }
        console.log("当前已上传文件大小：" + res.total.loaded +"Byte");
        console.log("已上传文件百分比：" + res.total.percent + "%");

    },
    error(err){
        console.log(err);
        alert("上传出错,请修改文件名称后重试")
    },
    complete(res){
        console.log("文件上传成功");
        console.log(res);
        getFileQiniu(res);
        if (res.key && res.key.match(/\.(jpg|jpeg|png|gif)$/)) {
            catImg(domain,res.key);
        }
    }
}



var putExtra ={
    //文件原文件名
    fname: "",
    //用来放置自定义变量
    params: {},
    //用来限定上传文件类型，指定null时自动判断文件类型 ["image/png", "image/jpeg", "image/gif"]
    mimeType: null
};



$("#selectFile").change(function(){
    //获取当前选择的文件
    file = this.files[0];
    //当选择文件不为空时
    if (file) {
        $("#uploadState").val(1)
        fileas(this,file)
        //获取上传文件的名称
        var pattern=/[`~!@#$^\-&*()=|{}':;',\\\[\]<>\/?~！@#￥……&*（）——|{}【】'；：""'。，、？%\s]/g;
        key = "AQZG_SG/"+Date.now() + file.name.replace(pattern,"");
        console.log(key)
        //校验文件大小
        checkFileSize(file);
        putExtra.fname = key.split(".")[0];
        //执行文件上传
        observable = qiniu.upload(file, key, token, putExtra, config);
        subscription = observable.subscribe(observer)
    } else {
        alert("选择文件不能为空!")
    }
})

function uploadFile(e) {
    //获取当前选择的文件
    file = e.files[0];
    //当选择文件不为空时
    if (file) {
        $("#uploadState").val(1)
        fileas(e,file)
        //获取上传文件的名称
        var pattern=/[`~!@#$^\-&*()=|{}':;',\\\[\]<>\/?~！@#￥……&*（）——|{}【】'；：""'。，、？%\s]/g;
        key = "AQZG_SG/"+Date.now() + file.name.replace(pattern,"");
        console.log(key)
        //校验文件大小
        checkFileSize(file);
        putExtra.fname = key.split(".")[0];
        //执行文件上传
        observable = qiniu.upload(file, key, token, putExtra, config);
        subscription = observable.subscribe(observer)
    } else {
        alert("选择文件不能为空!")
    }
}

/**
 * 文件大小校验
 * @param file
 */
function checkFileSize(file) {
    //计算分块大小
    let count = Math.ceil(file.size / BLOCK_SIZE);
    //文件大于限制禁止上传
    if (file.size >  10 * 1024 * 1024 * 1024) {
        console.log("不支持上传大于10G");
        return;
    }
    if(count > 1){
        console.log("大文件, 执行分块上传，支持断点续传!")
    } else {
        console.log("小文件上传!")
    }
}


function catImg(domain,key){
    $("#catImg").attr("src",domain+"/"+key)
}


//上传发起
$("#sub").click(function (){
    subscription = observable.subscribe(observer)
});

// 上传取消
$("#cancel").click(function(){
    subscription.unsubscribe()
})