vue上传图片（先上传到本地，提交时上传到服务器）

1.上传图片的地方

2.调用方法

//input 发生改变的时候触发
Preview(ev){
    // const self=this;
    const file=ev.target.files[0];
    this.imgObj=ev.target.files[0];
    let obj=new FileReader();
    obj.readAsDataURL(file);
    // obj.οnlοad=function(){
    //   self.img=obj.result;
    // }
    obj.οnlοad=()=>{
        this.picReduce(obj.result,base64=>{
            this.img=base64
        });
    };
},

// 图片压缩
picReduce(picObj,callback){
    let img = new Image();
    img.src=picObj;
    img.οnlοad=()=>{
        const w=img.width;
        const h=img.height;
        const scale = w/h;
        const max_w=w>1080?1080:w;
        const max_h=h*max_w/w;
        let canvas=document.createElement("canvas");
        let ctx = canvas.getContext('2d');
        canvas.width=max_w;
        canvas.height=max_h;
        ctx.drawImage(img,0,0,max_w,max_h);
        var base64 = canvas.toDataURL('image/jpeg', 0.7);
        callback(base64)
    }
},
3.提交时（用form表单提交）

let _self=this;
var fd = new FormData();
let blob1 = this.dataURItoBlob(this.img);
fd.append("physicalTestImg",blob1);
$http.activity618SignUp(fd,function(msg){
    if(msg.success){
        _self.Toast(msg.alertMsg);
    }else{
        _self.Toast(msg.alertMsg);
        this.isSubmit=false;
    }
})

转载于:https://www.cnblogs.com/miaSlady/p/9238321.html