Vue觸發(fā)input選取文件點(diǎn)擊事件操作
更新時(shí)間：2020年08月07日 11:35:43 作者：LaLaLa_heng
這篇文章主要介紹了Vue觸發(fā)input選取文件點(diǎn)擊事件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
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">點(diǎn)擊上傳</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;
}
}
補(bǔ)充知識(shí)： vue下打包時(shí)幾個(gè)文件選擇文件打包一起 并做懶加載
直接上代碼
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(shù)-DeviceManage的文件會(huì)被打包在一起
以上這篇Vue觸發(fā)input選取文件點(diǎn)擊事件操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了自定義vue組件發(fā)布到npm的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
Vue3.x如何操作v-html指令中HTML的DOM和樣式
在 Vue3.x 中,v-html 指令用于將 HTML 字符串渲染為真實(shí)的 DOM 元素,下面我們來看看具體如何操作v-html指令中HTML的DOM和樣式吧2025-04-04
Web應(yīng)用程序中資源分頁不僅對(duì)性能很有幫助，而且從用戶體驗(yàn)的角度來說也是非常有用的。在這篇文章中，將了解如何使用Vue創(chuàng)建動(dòng)態(tài)和可用的分頁組件2022-12-12
解決vue項(xiàng)目axios每次請(qǐng)求session不一致的問題
這篇文章主要介紹了解決vue項(xiàng)目axios每次請(qǐng)求session不一致的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
圖文詳解Element-UI中自定義修改el-table樣式
elementUI提供的組件間距、樣式都比較大,如果直接套用,在頁面顯示可能就會(huì)顯得很大,就比如表格,表頭、行寬如果不修改的話,遇到列較多的時(shí)候,會(huì)顯得整個(gè)頁面就不好看,下面這篇文章主要給大家介紹了關(guān)于Element-UI中自定義修改el-table樣式的相關(guān)資料,需要的朋友可以參考下2022-08-08
vue實(shí)現(xiàn)局部刷新的實(shí)現(xiàn)示例
這篇文章主要介紹了vue實(shí)現(xiàn)局部刷新的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要為大家詳細(xì)介紹了基于vue的fullpage.js單頁滾動(dòng)插件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了淺談vue.use()方法從源碼到使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
五步教你用Nginx部署Vue項(xiàng)目及解決動(dòng)態(tài)路由刷新404問題
nginx 是一個(gè)代理的服務(wù)器,下面這篇文章主要給大家介紹了關(guān)于如何通過五步教你用Nginx部署Vue項(xiàng)目及解決動(dòng)態(tài)路由刷新404問題的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue如何根據(jù)數(shù)值判斷顏色問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03