vue3项目实现文件上传

<template>
    <div>
        <!-- <p class="text-center">hello world</p> -->
        <input ref='uploadInput' type= "file" class="dl-none" name="icon" @change="dealfilechange"/>
        <button class="btn btn-primary" @click="uploadgogo">
            <span>上传</span>
        </button>     
    </div> 
</template>


<script lang="ts">
import Vue from 'vue'
import {defineComponent,ref} from "vue"



export default defineComponent({

    setup(props,context){ 
        const uploadInput = ref<HTMLElement| null>(null);
        const dealfilechange =(e:Event)=>{
            const input  = e.target as HTMLInputElement;
            let files = input.files;
            if(files){
                console.log(files[0])
            }
        }
        // 上传
        const uploadgogo = ()=>{
            // console.log(uploadInput.value)
            let oBtn = uploadInput.value as HTMLInputElement;
            oBtn.click();
        }
        
        return {
             dealfilechange,
             uploadgogo,
             uploadInput// 动态绑定
        }
    }

  
})
</script>

<style>
    .dl-none{
        display:none;
    }
</style>