当前位置：首页 > article >正文

原生input实现上传文件

article 2024/9/22 5:40:16

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

<input
          type="file"
          accept=".xls,.xlsx"
          class="file-btn"
          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({
      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;
    }
  };

查看全文

http://www.kler.cn/news/156676.html