前言：
组件库的文件上传不适合项目，这里我们利用input标签实现文件上传
首先input type=file 标签是这个亚子的，而且样式不能改，我们利用css的方法，将一个定位到这个下面来，然后input标签opcity:0，就哦了
用法：
input的accept属性，支持选择的文件类型，win系统上，如果不是这个类型的文件，选择文件的时候是看不到的，并绑定ref属性
利用inut的change事件，当选择文件的时候触发change事件，通过ref属性找到选择的文件对象（如下图），自己尝试着打印试试，这个就是后端需要的文件（包括文件名，大小等)
然后上传文件的时候需要 new FormData() 得到实例对象，然后往这个实例对象里面append添加属性就好了，这里的属性就是后台需要的参数，调用接口即可
必要的时候清空input的value，因为我们把input通过css opcity:0,看不到了，例如我们上传成功后应当清空input的value，如果不清空的话，其实选择的文件还是在的
multiple 属性可实现多文件上传
1 <template>
2 <div id="app">
3 <div class="selectfile">选择文件</div>
4 <input accept=".png, .jpg" type="file" ref="file" @change="selectFile" />
5 </div>
6 </template>
7
8 <script>
9 export default {
10 name: "app",
11 data() {
12 return {
13 filename: '',
14 selectFileobj: null
15 }
16 },
17 methods: {
18 // 选择文件
19 selectFile(e) {
20 console.log(this.$refs["file"].files);
21 console.log(this.$refs["file"].files[0]);
22 if (this.$refs["file"].files[0]) {
23 this.filename = this.$refs["file"].files[0].name;
24 this.selectFileobj = this.$refs["file"].files[0];
25 } else {
26 this.filename = "";
27 }
28 },
29
30 // 上传按钮
31 async Tofileupload() {
32 if (this.selectFileobj) {
33 let fd = new FormData();
34 fd.append("file", this.selectFileobj);
35 // fd.append("userId", this.userInfo.userId);
36
37 // const res = await importExcel(fd); // 调用接口实现文件上传
38 } else {
39 this.$message.warning("请选择要上传的文件");
40 }
41 },
42
43 // this.$refs['file'].value = '' // 必要的时候记得将选择的文件清空
44 },
45 };
46 </script>
