vue 上传图片 问题

在main.js 挂载全局方法

Vue.prototype.MYUPFile = function(pm_file, pm_id, pm_cbfunc_obj){

/*

回传的回调函数,是 func_callback(errtext, {'url':'','type':'','original':''})

// if(this.row.jiassfzfj > '' && this.row.jiassfzfj.length > 5){ this.avatar = this.row.jiassfzfj; }

//<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png" @change="changeImage($event)" class="uppic"> 让input放到img上,z-index比img大

<input type="file" @change=changeImage(e) { //上传图片

var file = e.target.files[0]

var reader = new FileReader()

var that = this

reader.readAsDataURL(file)

reader.onload = function(e) {

that.avatar = this.result //本地预览显示的图像

}

that.uploadstatusinfo = '...正在上传...'

//执行图片文件的上传

this.MYUPFile(file, '', function(errstr, jsobj){

if(errstr == null){

that.avatar = jsobj.url;

that.row.jiassfzfj = jsobj.url;

that.uploadstatusinfo = '...上传成功';

}else{

that.uploadstatusinfo = '...上传失败,'+errstr;

}

});

}

...

*/

let fd = new FormData()

fd.append('file', pm_file)

fd.append('id',pm_id)//其他参数

if(pm_cbfunc_obj == null || typeof(pm_cbfunc_obj) != 'function'){

var tip = '上传图像的回调函数pm_cbfunc_obj错！传入的回调函数 pm_cbfunc_obj 不正确,';

alert(tip); console.log(tip); console.log(pm_cbfunc_obj);

}

this.$axios.post(this.URLBASE+'IMP/upfile.jsp', fd).then((response)=>{

if(response.status == 200 ){

if(typeof(response.data.url) == 'string' && response.data.url > ''){ //访问网络异常,如地址错误,断网等

var rdata = response.data;

console.log(rdata);

pm_cbfunc_obj(null,rdata);

}else{

console.log(response);

pm_cbfunc_obj('上传图像返回错,'+response.data.state,response);

}

}else{

console.log(response);

pm_cbfunc_obj('上传图像返回的http状态码错,不是http ok 200',response);

}

}).catch(function (error) {

var tip = '上传图像异常错,'+error;

console.log(tip); console.log(error);

pm_cbfunc_obj(tip,error);

});

};

 

图

 

1.修改头像功能

:src="avatar"为绑定默认的头像图片 在data数据里面绑定

2.点击调用函数changeImage()

这个函数就是调用之前的main.js里边的公共函数