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">Click to upload</Button> <input ref="filElem" type="file" class="upload-file" @change="getFile"> </div>
Script
choiceImg(){ this.$(new MouseEvent('click')) }, getFile(){ var that = this; const inputFile = this.$[0]; if(inputFile){ if( !== 'image/jpeg' && !== 'image/png' && !== 'image/gif'){ alert('Not a valid picture file! '); return; } = ({}, , { name: , size: , lastModifiedDate: () }) const reader = new FileReader(); (inputFile); = function (e) { = ; } } else { return; } }
Supplementary knowledge:When packaging under vue, select several files to package together and do lazy loading
Directly upload the code
const DeviceManage = r => ([], () => r(require(deviceManagePath + 'main/DeviceManage')), 'g-DeviceManage'); const SingleDeviceSet = r => ([], () => r(require(deviceManagePath + 'deviceSet/SingleDeviceSet')), 'g-DeviceManage'); const ModifyNo = r => ([], () => r(require(deviceManagePath + 'modifyNo/ModifyNo')), 'g-DeviceManage'); const PricePerTime = r => ([], () => r(require(deviceManagePath + 'pricePerTime/PricePerTime')), 'g-DeviceManage'); const SetParams = r => ([], () => r(require(deviceManagePath + 'setParams/SetParams')), 'g-DeviceManage'); const ShowDevicePrice = r => ([], () => r(require(deviceManagePath + 'showDevicePrice/ShowDevicePrice')), 'g-DeviceManage'); const parameterSetting = r => ([], () => r(require(deviceManagePath + 'parameterSetting/parameterSetting')), 'g-DeviceManage'); const SetParams3G = r => ([], () => r(require(deviceManagePath + 'setParams3G/SetParams3G')), 'g-Device3Gparams');
Write this way all g-DeviceManage files will be packaged together
The above article Vue triggers the input file selection and click event operation is all the content I share with you. I hope you can give you a reference and I hope you can support me more.