1.设置一个input的change事件,把参数填进去,需要用到
<input
type="file"
accept=".xls,.xlsx"
required
@change="changeExcel($event)"
/>
2.先获取到事件内部的文件,通过length长度进行判断,在这里我限制了excel文件
const files = ev.target.files;
console.log(files);
if (files.length < 0) {
console.log('没有上传');
return false;
} else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
ElMessage.warning('您上传的文件格式不正确');
return false;
3.如果判断成功了就是用form data进行文件上传
let param = new FormData(); //创建form对象
param.append('file', files[0], files[0].name); //通过append向form对象添加数据
fileParam.value = param;
Filename.value = files[0].name;
4.请求接口axios,把需要上传的文件地址放进去即可
axios({
url: '上传文件的接口地址',
method: 'POST',
data: fileParam.value,
})
最后附上事件的完整代码
const changeExcel = (ev) => {
const files = ev.target.files;
console.log(files);
if (files.length < 0) {
console.log('没有上传');
return false;
} else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
ElMessage.warning('您上传的文件格式不正确');
return false;
} else {
let param = new FormData(); //创建form对象
param.append('file', files[0], files[0].name); //通过append向form对象添加数据
fileParam.value = param;
Filename.value = files[0].name;
}
};