1. 程式人生 > >input_file上傳圖片(vue)

input_file上傳圖片(vue)

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); } }); }; } } },