input_file上傳圖片(vue)
阿新 • • 發佈:2019-01-10
html:
<input @change="fileImage" type="file" accept="image/jpeg,image/x-png,image/gif" id="" value="" />
js:
methods:{
fileImage:function(e){
var that=this;
var file = e.target.files[0];
var imgSize=file.size/1024 ;
if(imgSize>200){
alert('請上傳大小不要超過200KB的圖片')
}else{
var reader = new FileReader();
reader.readAsDataURL(file); // 讀出 base64
reader.onloadend = function () {
// 圖片的 base64 格式, 可以直接當成 img 的 src 屬性值
var dataURL = reader.result;
// 下面邏輯處理
$.ajax({
type:"post",
url:"/v1/userSet" ,
async:true,
data:{
avatar:dataURL,
avatar_wx:1,
token:token,
uid:uid,
},
success:function(e){
that.avatar=dataURL;
alert('修改成功');
$(".tsk").show().delay(1500).hide(0);
}
});
};
}
}
},