原生input实现上传文件

1,先设置一下input,在change事件传一个参数


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,最后附上事件的完整代码

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

你可能感兴趣的:(前端,java,javascript)