vue3项目实现文件上传

原创已于 2023-03-17 21:52:13 修改 · 271 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

于 2023-03-17 21:51:42 首次发布

Vue 专栏收录该内容

8 篇文章

订阅专栏

该代码示例展示了如何在Vue.js应用中使用typescript编写一个简单的文件上传功能，通过`ref`获取输入元素，监听`change`事件处理文件选择，以及模拟点击触发上传操作。

<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>