vue如何封装选择文件组件和选择文件api

安森

vue封装选择文件组件和选择文件api


方式一：选择文件组件

1. <template>
   
2.         <div @click="clickHandle">
   
3.        <slot></slot>
   
4.            <input type="file" hidden  
   
5.            ref="inputRef"
   
6.            @change="changeFile"
   
7.            :accept="accept"
   
8.            :multiple="multiple"
   
9.           />
   
10.         </div>
    
11. </template>

复制代码

1. <script>
   
2.         export default {
   
3.                 name:'ChooseFile',
   
4.                 props:{
   
5.                         accept:{
   
6.                                 type:String
   
7.                         },
   
8.                         multiple:{
   
9.                                 type:Boolean,
   
10.                                 default:false
    
11.                         }
    
12.                
    
13.                 },
    
14.                 methods: {
    
15.                         clickHandle() {
    
16.                                 this.$refs.inputRef.click()
    
17.                        
    
18.                         },
    
19.                         changeFile(e){
    
20.                                
    
21.                                 this.$emit('chooseFile',e.target.files)
    
22.                         }
    
23.                 },
    
24.         }
    
25. </script>
    
26. 
    
27. <style scoped>
    
28. 
    
29. </style>

复制代码

方式二：选择文件api

1. const ChooseFile = (options) => {
   
2.         if(typeof options ==='function'){
   
3.                 options={success:options}
   
4.         }
   
5.         if (typeof options === 'object') {
   
6.                 let input = document.createElement("input")
   
7.                 document.body.appendChild(input)
   
8.                 input.type = 'file'
   
9.                 input.hidden='hidden'
   
10.                 if (options.accept) {
    
11.                         input.accept = options.accept
    
12.                 }
    
13.                 if (options.multiple != null) {
    
14.                         input.multiple = options.multiple
    
15.                 }
    
16.                 input.click()
    
17.                 input.onchange = (e) => {
    
18.                                 options.success(e.target.files)
    
19.                                 document.body.removeChild(input)
    
20.                 }
    
21.         }
    
22. }
    
23. export default ChooseFile

复制代码

挂载在vue原型上

使用

1. this.$chooseFile((files)=>console.log(files))

复制代码

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/326743mcd.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！