input上传文件

input上传文件

一个隐藏的input标签,一个触发uploadChange()的按钮

<input
     style="display: none"   
     ref="filElem"
     type="file"
     accept="application/vnd.ms-excel"
     @change="getFile"
/>
<a-button type="primary" @click="uploadChange">
     上传文件
</a-button>

JS部分

getFile() {
    const file = this.$refs.filElem.files[0];
    //这里写你的上传文件方法
    xxxx().then(res=>{})
},
uploadChange() {
    this.$refs.filElem.dispatchEvent(new MouseEvent("click"));
},

这样点击按钮就会弹出选文件的弹窗,
下面在附上一些,input的accept属性,可以选择上传文件类型

accept="image/* " 图片类型,窗口只显示图片和文件夹

accept="video/* " 视频类型

accept="audio/* " 音频类型 一些mp3，wav

accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet " 上传excel文件

accept=".pdf"