vue上传图片(先上传到本地,提交时上传到服务器)

1.上传图片的地方

<input type="file" @change="Preview($event)" accept="image/*" ref="showinput">
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.onload=function(){
// self.img=obj.result;
// }
obj.onload=()=>{
this.picReduce(obj.result,base64=>{
this.img=base64
});
};
},
// 图片压缩
picReduce(picObj,callback){
let img = new Image();
img.src=picObj;
img.onload=()=>{
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;
}
})


猜你喜欢

转载自www.cnblogs.com/miaSlady/p/9238321.html