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 相关文章推荐
js每次Title显示不同的名言
Sep 25 Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
js确认删除对话框效果的示例代码
Feb 20 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
jquery实现动态画圆
Dec 04 Javascript
浅谈javascript中字符串String与数组Array
Dec 31 Javascript
通过JS判断联网类型和连接状态的实现代码
Apr 01 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
koa-router路由参数和前端路由的结合详解
May 19 Javascript
JavaScript实现跟随鼠标移动的盒子
Jan 28 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
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
PHP中常用的转义函数
2014/02/28 PHP
ECMall支持SSL连接邮件服务器的配置方法详解
2014/05/19 PHP
php实现mysql数据库分表分段备份
2015/06/18 PHP
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
jQuery过滤选择器用法示例
2016/09/12 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
layui分页效果实现代码
2017/05/19 Javascript
JS排序算法之希尔排序与快速排序实现方法
2017/12/12 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
JS中的防抖与节流及作用详解
2019/04/01 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
浅析Python中yield关键词的作用与用法
2016/11/29 Python
解决Python requests 报错方法集锦
2017/03/19 Python
对Python3.x版本print函数左右对齐详解
2018/12/22 Python
jupyter lab的目录调整及设置默认浏览器为chrome的方法
2020/04/10 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
Structs界面控制层技术
2013/10/11 面试题
物流仓管员岗位职责
2013/12/04 职场文书
编辑找工作求职信范文
2013/12/16 职场文书
银行存款证明样本
2014/01/17 职场文书
摄影助理岗位职责
2014/02/07 职场文书
领导干部廉政承诺书
2014/03/27 职场文书
企业宣传策划方案
2014/05/29 职场文书
作风转变年心得体会
2014/10/22 职场文书
求职信格式范文
2015/03/19 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
2016公司年会主持词
2015/07/01 职场文书
2016入党培训心得体会范文
2016/01/08 职场文书
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript