原生input实现上传文件

最新推荐文章于 2024-08-12 16:30:53 发布

哥很冷漠

最新推荐文章于 2024-08-12 16:30:53 发布

阅读量2.5k

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_63608386/article/details/128491134

版权

这篇博客详细介绍了如何在Vue.js应用中实现Excel文件的上传，并在用户选择文件时进行格式检查，确保上传的文件是.xls或.xlsx格式。通过监听input元素的change事件，获取文件并检查文件长度及文件名的后缀。如果文件为空或者格式不正确，会给出相应警告。最后，使用FormData对象将文件数据添加到POST请求中，发送到指定的服务器接口。

摘要由CSDN通过智能技术生成

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