业务实际需求：
- 点击【选择】按钮先选择文件，展示文件的详情：类型，大小，日期......
- 点击【上传】按钮这个时候才去上传文件
如图：
BUG复现：
点击上传文件后发现xlsx文件有些数据没填写，然后打开测试文件把漏掉的或者个别字段重新修改填上去，继续点击上传按钮，发现这个时候就报错了。如图：
问题原因：主要是浏览器的安全机制，如果要上传的文件先选择然后进行了修改再上传则会被拒绝上传
解决问题
1、每次上传，把文件转成base64，从而与本地的文件状态失去关联，无论后续怎么修改文件再点击上传，永远上传的还是最开始上传的那份。（不推荐，用户既然要改文件数据，肯定是希望上传最新的文件，而不是没改之前的）
2、给到用户反馈结果提示，告知用户文件已经被修改请重新上传（推荐）
- js监听不到文件的改变的函数，只能通过接口请求失败后通过
promise的catch捕获错误然后提示到用户
代码实现
1、请求中实现
async submit() {const file = '测试测试测试文件.xlsx'; // 上传后拿到的file文件const form = new FormData()form.append('id', Math.random())form.append('file', file)form.append('fileType','TEST')const res = await uploadApi(form)if (!res) return this.$message.warning('文件已修改，请删除后再重新上传！')if (res.code === 200) {//done}},2、获取文件中拦截
//上传并解析文件
function encodeFile(file) { return new Promise((resolve, reject) => { const reader = new FileReader()reader.readAsDataURL(file) //读取到文件返回一个promise，如果读取成功了说明文件没有进行更改reader.onload = function(e) { const base64Data = e.target.result.split(',')[1] // 提取Base64编码部分 resolve(base64Data) // 使用Promise的resolve方法返回Base64数据 }//如果被拒绝了则说明文件进行了更改，告知用户需要重新选择文件reader.onerror = function(e) { this.$message.warning('文件已修改，请删除后再重新上传！')reject(new Error(e)) }})
} 发现问题，记录一下~
