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代码
Apr 02 Javascript
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
Jun 04 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
Sep 18 Javascript
JS实现的碰撞检测与周期移动完整示例
Sep 02 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
vue3.0 加载json的方法(非ajax)
Oct 26 Javascript
js中延迟加载和预加载的具体使用
Jan 14 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
php限制文件下载速度的代码
2015/10/20 PHP
PHP实现的装箱算法示例
2018/06/23 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
python开启多个子进程并行运行的方法
2015/04/18 Python
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
Python中装饰器高级用法详解
2017/12/25 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
Python爬虫headers处理及网络超时问题解决方案
2020/06/19 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
Pycharm2020.1安装无法启动问题即设置中文插件的方法
2020/08/07 Python
python中字典增加和删除使用方法
2020/09/30 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
C语言笔试题
2014/09/04 面试题
linux面试题参考答案(3)
2012/09/13 面试题
2014年机关植树节活动方案
2014/02/27 职场文书
2014年统计工作总结
2014/11/21 职场文书
营销计划书
2015/01/17 职场文书
物业接待员岗位职责
2015/04/15 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
演讲比赛通讯稿
2015/07/18 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏