原生input输入框实现上传文件

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;
    }
  };