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 步骤:
模拟写法如上,由于我手头没有图片后台代码,所以只有模拟写法了!