Vue觸發input選取檔案點選事件操作
阿新 • • 發佈:2020-08-08
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選取檔案點選事件操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。