axios onuploadprogress работает неправильно? - PullRequest
Новая
       17

axios onuploadprogress работает неправильно?

0 голосов
/ 05 декабря 2018

Я хочу показать прогресс при загрузке изображения, при загрузке изображения, которое не сжато, оно работает правильно. Но когда вы загружаете изображение сжатым, функция onuploadprogress запускается только один раз. Что не так с кодом? Спасибо!

beforeupload:function(file){
var ready=new FileReader();
ready.readAsDataURL(file);
var that=this;
ready.onload=function(){
    var img=new Image();
    img.src=this.result;
    img.onload=function(){
        var img1=new Image();
        var canvas=document.createElement("canvas");
        var ctx=canvas.getContext('2d');
        var sourcew=img.width;
        var sourceh=img.height;
        var scale=sourcew/sourceh;
        var desw,desh;
        if(sourcew>4000)
            {
                desw=4000;
                desh=desw/scale;
            }
        else{
                desw=sourcew;
                desh=sourceh;
            }
        var w=document.createAttribute("width");
        w.nodeValue=desw;
        var h=document.createAttribute("height");
        h.nodeValue=desh;
        canvas.setAttributeNode(w);
        canvas.setAttributeNode(h);
        ctx.drawImage(this,0,0,desw,desh);
        var base64=canvas.toDataURL('image/jpeg',1);
        var arr=base64.split(','),mime=arr[0].match(/:(.*?);/)[1],
        bstr=window.atob(arr[1]),n=bstr.length,u8arr=new Uint8Array(n);
        for(var i=0;i<n;i++)
            {
                u8arr[i]=bstr.charCodeAt(i);
            }
        var file1=new File([u8arr],"newfile",{type:"image/jpeg"});
        //that.form.append("file1",file,"file.jpg");//it work right;
        that.form.append("file1",file1,"file1.jpg");//it work wrong;
        var config={
            headers:{"Content-type":"multipart/form-data"},
            onUploadProgress:function(progress){
            var percent=100*(progress.loaded/progress.total);
            console.log(percent);
            that.uploadpercent=percent;
            },
            onDownloadProgress:function(progress1){
            console.log("downing");
            },
        };
        that.$http.post("/Manager/postitem",that.form,config).then(response=>{alert("success");
        that.num=0;that.current=0;that.form=new FormData();that.uploadpercent=0;}).catch(error=>{alert(error);});
             }
    }
return false;
    }

файл не сжимается, а файл1 сжимается.
при использовании
that.form.append("file1",file,"file.jpg");
работает правильно, а журналы Chrome:
14.657238452273665
30.857344110049823
47.05744976782598
64.0289890283534
80.22909468612954
96.4292003439057
100

при использовании
that.form.append("file1",file1,"file1.jpg");
работает неправильно и журналы хрома:
100

...