Vue触发input选取文件点击事件操作
CSS
.upload-btn-box{ margin-bottom:10px; button{ margin-right:10px; } input[type=file]{ display:none; } }
HTML
Script
choiceImg(){ this.$refs.filElem.dispatchEvent(newMouseEvent('click')) }, getFile(){ varthat=this; constinputFile=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() }) constreader=newFileReader(); reader.readAsDataURL(inputFile); reader.onload=function(e){ that.imgSrc=this.result; } }else{ return; } }
补充知识:vue下打包时几个文件选择文件打包一起并做懒加载
直接上代码
constDeviceManage=r=>require.ensure([],()=>r(require(deviceManagePath+'main/DeviceManage')),'g-DeviceManage'); constSingleDeviceSet=r=>require.ensure([],()=>r(require(deviceManagePath+'deviceSet/SingleDeviceSet')),'g-DeviceManage'); constModifyNo=r=>require.ensure([],()=>r(require(deviceManagePath+'modifyNo/ModifyNo')),'g-DeviceManage'); constPricePerTime=r=>require.ensure([],()=>r(require(deviceManagePath+'pricePerTime/PricePerTime')),'g-DeviceManage'); constSetParams=r=>require.ensure([],()=>r(require(deviceManagePath+'setParams/SetParams')),'g-DeviceManage'); constShowDevicePrice=r=>require.ensure([],()=>r(require(deviceManagePath+'showDevicePrice/ShowDevicePrice')),'g-DeviceManage'); constparameterSetting=r=>require.ensure([],()=>r(require(deviceManagePath+'parameterSetting/parameterSetting')),'g-DeviceManage'); constSetParams3G=r=>require.ensure([],()=>r(require(deviceManagePath+'setParams3G/SetParams3G')),'g-Device3Gparams');
这么写所有g-DeviceManage的文件会被打包在一起
以上这篇Vue触发input选取文件点击事件操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。