微客导航 » 文章资讯 » Vue触发input选取文件点击事件操作

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

2023-07-19 02:58:03 318

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选取文件点击事件操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐