ElementUI文件上传 实现点击【选择文件】按钮切换文件

问题描述

在文件上传的时候，我们往往会有这样的需求：一次只能上传一个文件。
用过ElementUI的 el-upload 的你一定会说，这个好办啊，加个limit 属性就可以解决了。
但是有可能会出现这种情况：我想上传 【1.txt】这个文件，然后手快点了【2.txt】这个文件。
选错文件了而已嘛，那就切换啊。这时候，你会发现，无论怎么点击，你都选不上【1.txt】这个文件。
因为ElementUI认为，你这人不行啊，都限制你只能上传一个了，你还在选多文件，我就不让你选上！

问题解决

由于设置了limit会导致无法选择其他的文件，所以我们不能设置limit。我们的目的是想实现切换文件，如果你不设置limit的话，你会发现，你选择了两次文件的话，两个文件都会帮你选上，但我只能上传一个文件呀。所以，我们要手动去维护ElemetUI的文件上传列表。

1. 在<el-upload>中使用on-change属性绑定一个文件状态改变时的处理函数。

on-change: 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用

<el-upload :on-change="handleSelectFile"></el-upload>

2. 在handleSelectFile这个函数中，我们可以获取上传的文件列表，我们可以将前面上传的那个文件给去掉，这样就可以轻松实现切换文件的效果了

handleSelectFile(file, fileList) {
   if (fileList.length > 1) {
     fileList.shift();
   }
},