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

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

2021-08-11 17:47LaLaLa_heng JavaScript

这篇文章主要介绍了Vue触发input选取文件点击事件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

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');