vue如何封装选择文件组件和选择文件api
作者：Mr阿斌
这篇文章主要介绍了vue如何封装选择文件组件和选择文件api问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
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))
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。