前端ajax上传图片到七牛

我的项目代码 上传到laravel

function uploadImgs(event) {
    var e=window.event||event;
    var that = e.target;
    // 获取当前选中的文件
    var length = e.target.files.length;
    // 没有文件的时候不执行程序
    var formData = new FormData();
    // 判断文件的数量
    if(length > 3){
        $.alert("单次文件上传数量不能大于3张！");
        return;
    }
    // 判断文件的尺寸
    for (var i=0 ;i< length; i++) {
        var file = e.target.files[i];
        if(file.size > 10*1024 * 1024){
            $.alert("文件尺寸不能大于10M");
            return;
        }
    }
    // 追加到from对象
    for (var i=0 ;i< length; i++) {
        var file = e.target.files[i];
        formData.append("file[]" , file);
    }
    //遮罩层开启
    $('.weui-loadmore').show();
    $.ajax({
        url: "/wx/apply/step/upload/file",
        type: "post",
        data: formData ,
        processData : false, //必须false才会自动加上正确的Content-Type
        cache: false, //上传文件不需要缓存
        contentType : false ,
        success: function(res) {
            //遮罩层关闭
            $('.weui-loadmore').hide();
            if(res.code == 0){
                $.toast(res.text, 1000);
                $(that).attr('value', res.data).prev().prev().text(res.data.slice(-16));
                $(that).attr('name',res.data)
            }else{
                $.toast(res.text, "cancel");
            }
            console.log(res);
        },
        error: function(err){
            console.log(err)
        }
    });
}

我的代码，上传到七牛

function uploadImg(event) {
    var e=window.event||event;
    var that = e.target;
    $(that).attr('value','');
    // 获取当前选中的文件
    var length = e.target.files.length;
    // 判断文件的数量
    if(length > 3){
        $.alert("单次文件上传数量不能大于3张！");
        return;
    }
    // 判断文件的尺寸
    for (var i=0 ;i< length; i++) {
        var file = e.target.files[i];
        if(file.size > 10*1024 * 1024){
            $.alert("文件尺寸不能大于10M");
            return;
        }
    }
    //需要上传的图片内容 base64格式
    var imgStr = '';
    //七牛云平台 配置的域名
    var urlHeader = "http://qiniu.yunyidai.net/";
    qnToken(token);
    // 追加到from对象
    var allImgSrc = '';
    $('.weui-loadmore').show();
    for (var i=0 ;i< length; i++) {
        imgStr = '';
        var reader = new FileReader();
        var file = e.target.files[i];
        //文件后缀
        var prifix = file.name.split('.')[1];
        //七牛云图片base64格式上传地址
        var uploadUrl = "https://upload.qiniup.com/putb64/-1/key/" + window.btoa("customer_"+ parseInt(Math.random()*9999999) + new Date().getTime()+"_"+parseInt(Math.random()*9999999) + '.' + prifix);
        reader.readAsDataURL(file);
        reader.onload = function(e) {
            //获取到base64格式的图片
            imgStr = reader.result.split(',')[1];
            $.ajax({
                headers: {
                    'Authorization' : "UpToken " + qiniutoken
                },
                url: uploadUrl,
                type: 'POST',
                data: imgStr,
                success: function (res) {
                    var result = res;
                    var that_attr_name =  $(that).attr('value');
                    if(!that_attr_name){
                        that_attr_name = [];
                    }else{
                        that_attr_name = $(that).attr('value').split(',');
                    }
                    that_attr_name.push(qiniuhost + result.key);
                    // console.log(result.hash);
                    $(that).attr('value',that_attr_name.join(',')).prev().prev().text(result.hash);
                    console.log(that_attr_name.join(','));
                }
            });
        }
    }
    $('.weui-loadmore').hide();
    $.toast('上传成功！', 1000);
}

网络同仁的代码

function upload(input) {
        $(input).change(function(){
            var file = this.files[0];
            // if(file.type.indexOf('image') != 0) { // 只上传图片}
            if (window.FileReader) {
                var reader = new FileReader();
                reader.readAsDataURL(file);
                //监听文件读取结束后事件
                reader.onloadend = function (e) {
                    var size = e.total;
                    if(size>1048576){
                        alert('图片大小不能超过1M');
                        return;
                    }
                    var data64 = e.target.result; // data64
                    data64 = data64.slice(data64.indexOf(',')+1);  // 截取前缀的base64   data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnoAAAJeCAYAA.......
                    putb64(size,data64);  // 执行上传
                };
            }
        });
        function putb64(size,data64){
            var pic = data64;           //  填写你的base64后的字符串
            var url = "http://upload.qiniu.com/putb64/"+size+'/key/'+window.btoa("0612_"+ new Date().getTime()+"_"+parseInt(Math.random()*10));
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange=function(){
                if (xhr.readyState==4){  // xhr.responseText  =>  "{"hash":"Fto5o-5ea0sNMlW_75VgGJCv2AcJ","key":"Fto5o-5ea0sNMlW_75VgGJCv2AcJ"}"
                        $('.book-pic-message').hide();
                        var back_json = JSON.parse(xhr.responseText);
                        $('.book-pic-preview').append('![](http://ogiwpf1aa.bkt.clouddn.com/'+back_json.key+')').show();
                        $('.book-pic-clear').css('background','#4c4c4c').show();
                }
            };
            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-Type", "application/octet-stream");
            xhr.setRequestHeader("Authorization", "UpToken 你自己的七牛token");
            xhr.send(pic);
        }
    }
    function del(button) {
        //清除input file已选中的文件
        $(button).siblings('.input-file').wrap('
');
        $(button).siblings('form')[0].reset();
        $(button).siblings('form').find('.input-file').unwrap();
        $(button).siblings('.book-pic-preview').find('img').remove();
        $(button).hide();
        $('.book-pic-preview').hide();
        $('.book-pic-message').show();
    }