input_file上传图片(vue)
2017-12-04 17:30
489 查看
html:
js:
<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); } }); }; } } },
相关文章推荐
- html5手机 input file 上传图片 调用API
- 上传文件input tyle="file"文件的浏览按钮和文本框用图片替换的方法1
- input file 重复上传同一张图片失效的解决办法
- input file上传图片预览
- input标签 type='file' 上传图片问题
- 处理同一页面中借助form+input[type="file"]上传图片出现的input无法清空问题
- input标签上传图片到后端前用H5的FileReader 方法实现图片的显示
- [置顶] input file上传图片预览(查看图片大小,类型,名字)------------------------------自己动手写jQuery插件
- input file上传图片
- 简单获取input file 选中的图片,并在一个div的img里面赋值src实现预览图片(可实现多张图片上传和预览移除)
- Android笔记:Webview 支持 input type=file选择上传图片
- Bootstrap中的fileinput 多图片上传及编辑功能
- php fileinput实现多图片批量上传
- 利用原生的 file input上传 图片
- django 通过bootstrap fileinput 上传图片
- 使用input标签 type='file' 上传图片的问题
- vue给input file绑定函数获取当前上传的对象
- input file实现多张图片上传
- input file 获取上传图片并显示在页面
- html5手机 input file 上传图片 调用API