Vue触发input选取文件点击事件操作


Posted in Javascript onAugust 07, 2020

CSS

.upload-btn-box {
  margin-bottom: 10px;
  button {
    margin-right: 10px;
  }
  input[type=file] {
    display: none;
  }
}

HTML

<div class="upload-btn-box">
<Button @click="choiceImg" icon="ios-cloud-upload-outline" type="primary">点击上传</Button>
  <input ref="filElem" type="file" class="upload-file" @change="getFile">
</div>

Script

choiceImg(){
  this.$refs.filElem.dispatchEvent(new MouseEvent('click')) 
},
getFile(){
      var that = this;
      const inputFile = this.$refs.filElem.files[0];
      if(inputFile){
        if(inputFile.type !== 'image/jpeg' && inputFile.type !== 'image/png' && inputFile.type !== 'image/gif'){
          alert('不是有效的图片文件!');
          return;
        }
        this.imgInfo = Object.assign({}, this.imgInfo, {
          name: inputFile.name,
          size: inputFile.size,
          lastModifiedDate: inputFile.lastModifiedDate.toLocaleString()
        })
        const reader = new FileReader();
        reader.readAsDataURL(inputFile);
        reader.onload = function (e) {
          that.imgSrc = this.result;
        }
      } else {
        return;
      }
    }

补充知识: vue下打包时几个文件选择文件打包一起 并做懒加载

直接上代码

const DeviceManage = r => require.ensure([], () => r(require(deviceManagePath + 'main/DeviceManage')), 'g-DeviceManage');
const SingleDeviceSet = r => require.ensure([], () => r(require(deviceManagePath + 'deviceSet/SingleDeviceSet')), 'g-DeviceManage');
const ModifyNo = r => require.ensure([], () => r(require(deviceManagePath + 'modifyNo/ModifyNo')), 'g-DeviceManage');
const PricePerTime = r => require.ensure([], () => r(require(deviceManagePath + 'pricePerTime/PricePerTime')), 'g-DeviceManage');
const SetParams = r => require.ensure([], () => r(require(deviceManagePath + 'setParams/SetParams')), 'g-DeviceManage');
const ShowDevicePrice = r => require.ensure([], () => r(require(deviceManagePath + 'showDevicePrice/ShowDevicePrice')), 'g-DeviceManage');
const parameterSetting = r => require.ensure([], () => r(require(deviceManagePath + 'parameterSetting/parameterSetting')), 'g-DeviceManage');
const SetParams3G = r => require.ensure([], () => r(require(deviceManagePath + 'setParams3G/SetParams3G')), 'g-Device3Gparams');

这么写 所有g-DeviceManage的文件会被打包在一起

以上这篇Vue触发input选取文件点击事件操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript document.referrer 用法
Apr 30 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
IE6不能修改NAME问题的解决方法
Sep 03 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
js展开闭合效果演示代码
Jul 24 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
Nov 28 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 Javascript
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
vue实现多条件和模糊搜索功能
May 28 Javascript
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 07 #Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 #Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 #Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 #jQuery
vue递归获取父元素的元素实例
Aug 07 #Javascript
在vue中使用Base64转码的案例
Aug 07 #Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 #Javascript
You might like
Protoss魔法科技
2020/03/14 星际争霸
php下实现折线图效果的代码
2007/04/28 PHP
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
用PHP与XML联手进行网站编程代码实例
2008/07/10 PHP
PHP操作MongoDB GridFS 存储文件的详解
2013/06/20 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
window.showModalDialog使用手册
2007/01/11 Javascript
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
JS实现拖拽的方法分析
2016/12/20 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
Python中的rjust()方法使用详解
2015/05/19 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
python用Configobj模块读取配置文件
2020/09/26 Python
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
交通安全教育制度
2014/02/02 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
小学主题班会教案
2015/08/17 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js