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在IE和FireFox中的不同表现简析
Dec 03 Javascript
jquery二级导航内容均分的原理及实现
Aug 13 Javascript
javascript中的Function.prototye.bind
Jun 25 Javascript
Sea.JS知识总结
May 05 Javascript
vue中父子组件注意事项,传值及slot应用技巧
May 09 Javascript
解决bootstrap-select 动态加载数据不显示的问题
Aug 10 Javascript
vue升级之路之vue-router的使用教程
Aug 14 Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 Javascript
微信小程序返回上一级页面的实现代码
Jun 19 Javascript
vue实现图片按比例缩放问题操作
Aug 11 Javascript
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
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
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
php全角字符转换为半角函数
2014/02/07 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
禁止刷新,回退的JS
2006/11/25 Javascript
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
一个获取第n个元素节点的js函数
2014/09/02 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
jquery判断输入密码两次是否相等
2020/04/22 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
使用Node.js实现RESTful API的示例
2017/08/01 Javascript
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
2017/12/21 Javascript
vue 引入公共css文件的简单方法(推荐)
2018/01/20 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
python 实现红包随机生成算法的简单实例
2017/01/04 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
自定义Django_rest_framework_jwt登陆错误返回的解决
2020/10/18 Python
python爬虫判断招聘信息是否存在的实例代码
2020/11/20 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
八年级语文教学反思
2014/02/11 职场文书
违纪检讨书
2015/01/27 职场文书
慰问信范文
2015/02/14 职场文书