vue如何封裝選擇文件組件和選擇文件api
更新時(shí)間：2024年08月30日 17:21:25 作者：Mr阿斌
這篇文章主要介紹了vue如何封裝選擇文件組件和選擇文件api問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue封裝選擇文件組件和選擇文件api
方式一：選擇文件組件
<template>
<div @click="clickHandle">
<slot></slot>
<input type="file" hidden
ref="inputRef"
@change="changeFile"
:accept="accept"
:multiple="multiple"
/>
</div>
</template><script>
export default {
name:'ChooseFile',
props:{
accept:{
type:String
},
multiple:{
type:Boolean,
default:false
}
},
methods: {
clickHandle() {
this.$refs.inputRef.click()
},
changeFile(e){
this.$emit('chooseFile',e.target.files)
}
},
}
</script>
<style scoped>
</style>方式二：選擇文件api
const ChooseFile = (options) => {
if(typeof options ==='function'){
options={success:options}
}
if (typeof options === 'object') {
let input = document.createElement("input")
document.body.appendChild(input)
input.type = 'file'
input.hidden='hidden'
if (options.accept) {
input.accept = options.accept
}
if (options.multiple != null) {
input.multiple = options.multiple
}
input.click()
input.onchange = (e) => {
options.success(e.target.files)
document.body.removeChild(input)
}
}
}
export default ChooseFile掛載在vue原型上
使用
this.$chooseFile((files)=>console.log(files))
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了Vue在css中圖片路徑問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
Arco Design 作為一款專為 Vue3 打造的企業(yè)級(jí) UI 組件庫,以其豐富的特性和卓越的性能,成為現(xiàn)代 Web 應(yīng)用開發(fā)者值得關(guān)注的選擇,這篇文章主要介紹了Vue3 框架Arco Design詳解,需要的朋友可以參考下2024-08-08
vue中的axios配置及接口請(qǐng)求路徑api配置
這篇文章主要介紹了vue中的axios配置及接口請(qǐng)求路徑api配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
學(xué)習(xí) Vue 的時(shí)候覺得樣式綁定很簡(jiǎn)單，但是使用的時(shí)候總是容易搞暈自己。這篇文章主要介紹了Vue 樣式綁定的實(shí)現(xiàn)方法，感興趣的小伙伴們可以參考一下2019-01-01
這篇文章主要介紹了Vue自定義指令詳解,需要的朋友可以參考下2022-12-12
在 Vue 項(xiàng)目開發(fā)中,組件通訊是基礎(chǔ)也是核心,不同的組件關(guān)系（父子、祖先后代、任意組件）有著不同的最優(yōu)解方案,本文介紹了Vue項(xiàng)目中組件通訊的不同方式,包括父子組件的props、v-model和自定義事件,需要的朋友可以參考下2026-04-04
前端vue項(xiàng)目打包為war包的實(shí)現(xiàn)示例
本文介紹將前端項(xiàng)目打包為war包的步驟,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-11-11
這篇文章我們將探討Vue3框架的優(yōu)秀特性、使用原理、周邊生態(tài)和實(shí)戰(zhàn)應(yīng)用，系統(tǒng)的學(xué)習(xí)Vue生態(tài)體系，希望和大家共同成長，我們一起探討下Vue3和Vue2的響應(yīng)式原理，那究竟什么是“響應(yīng)式”，接下來跟著小編一起來學(xué)習(xí)吧2023-05-05
uni-app中使用ECharts配置四種不同的圖表(示例詳解)
在uni-app中集成ECharts可以為我們的應(yīng)用提供強(qiáng)大的圖表功能,我們?cè)敿?xì)說一下如何在uni-app中使用ECharts,并配置四種不同的圖表,感興趣的朋友跟隨小編一起看看吧2024-01-01
這篇文章主要介紹了Vue之創(chuàng)建項(xiàng)目及目錄方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11