vue3文件上传的操作解析

1，让原来的Input 框隐藏起来

2， 当我们点击按钮的时候，手动触发原来Input 的点击事件

3， 当input:type=file 发生变化时，得到文件，

4， 生成formdata 

5, 通过axios 去提交文件

fileUpload.vue

<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,onMounted} from "vue"
import { conditionalExpression } from '@babel/types';

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>

这里面涉及到 refs 的使用

我给大家贴个文章

https://zhuanlan.zhihu.com/p/148160183?from_voters_page=true
写的很不错，我就是忘记了最后一步导出，所以不起作用

至于表单提交的处理就很简单了，得到e.targe --> files -files[0] 就行了，

4-5 步骤:

模拟写法如上，由于我手头没有图片后台代码，所以只有模拟写法了！