在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);
}
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里边的公共函数