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 相关文章推荐
HTA版JSMin(省略修饰语若干)基于javascript语言编写
Dec 24 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
vue之浏览器存储方法封装实例
Mar 15 Javascript
JS开发常用工具函数(小结)
Jul 04 Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 Javascript
详解Vue的sync修饰符
May 15 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
用php实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
PHP学习之正则表达式
2011/04/17 PHP
php中字符串和正则表达式详解
2014/10/23 PHP
PHP中绘制图像的一些函数总结
2014/11/19 PHP
PHP、Java des加密解密实例
2015/04/27 PHP
php自动加载方式集合
2016/04/04 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
AngularJS 视图详解及示例代码
2016/08/17 Javascript
NodeJS远程代码执行
2016/08/28 NodeJs
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
python实现网页链接提取的方法分享
2014/02/25 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
python脚本和网页有何区别
2020/07/02 Python
python 简单的调用有道翻译
2020/11/25 Python
Html5 Canvas 实现一个“刮刮乐”游戏
2019/09/05 HTML / CSS
理肤泉俄罗斯官网:La Roche-Posay俄罗斯
2018/07/24 全球购物
什么是View State?
2013/01/27 面试题
体育教育专业自荐信范文
2013/12/20 职场文书
教师开学感言
2014/02/14 职场文书
关于运动会的广播稿
2014/09/22 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python