点击图标实现图片上传及相同图片上传无法触发change事件的问题解决
2020-07-20 17:43
381 查看
1、渲染(用了antd的组件)
<a-button type="primary" @click={this.chooseImg}> <a-icon type="file-image" /> </a-button> <input type="file" @change={this.getFile} accept="image/*" ref="imginput" style="display:none"/>
2、选择图片文件的方法:
/** * 点击按钮的事件关联到选择图片文件的input事件 */ chooseImg() { this.$refs.imginput.click(); }, /** * input选择图片 */ getFile(e) { const file = e.target.files[0]; if (!/image\/\w+/.test(file.type)) { this.$message.error('请选择图片'); // 清空input值,解决选择相同图片不触发change事件的问题 this.$refs.imginput.value = ''; return false; } this.param.originalFilename = file.name; // 创建文件读取对象 const reader = new FileReader(); reader.readAsDataURL(file); // 文件读取结束 reader.onload = () => { this.url = reader.result; }; },
相关文章推荐
- java上传文件或图片时选择相同文件无法触发onchange事件的问题
- 解决JS(Vue)input[type='file'] change事件无法上传相同文件的问题
- HTML5异步上传图片(支持预览和进度条),使用其他按钮触发file onclick事件,解决某些浏览器无法触发的问题
- input日期控件,无法触发文本改变事件onchange问题解决
- heightcharts点击曲线图获取返回值的问题(ios点击图表第一次无法触发点击事件解决方法)...
- jquery live方法,解决jquery动态添加按钮无法触发点击事件的问题
- 图片上传时input file change事件多次触发解决
- 关于V5.7 正式版 自定义字段图片上传无法点击选择的问题解决!
- 图片上传时input file change事件多次触发解决
- 解决Android按住空白区域,导致点击其他按钮无法触发点击事件的问题
- 解决jQuery ajax动态新增节点无法触发点击事件的问题
- 【H5】iphone多张图片上传,iCloud的照片无法触发onchange事件,问题总结
- ionic开发——百度地图InfoWindow信息窗口上添加按钮,无法触发点击事件问题解决办法
- 解决jQuery ajax动态新增节点无法触发点击事件的问题
- 解决kindeditor与Struts2框架整合时无法上传本地图片的问题
- asp.net+FCKeditor上传图片显示叉叉图片无法显示的问题的解决方法
- 解决linux下tomcat8上传图片other用户无法通过Nginx查看的问题
- 解决kindeditor与Struts2框架整合时无法上传本地图片的问题 (2)
- 解决jquery中动态新增的元素节点无法触发事件问题的两种方法
- IE8 用滤镜实现上传预览图片,解决C:\fakepath\*.jpg问题,获取本地路径