vue2 element附件上传封装组件，可以验证行数不超过100000行

在Vue2中使用Element UI封装一个附件上传组件，并实现行数不超过100000行的校验，可以通过以下步骤来完成：

1. **组件基础结构搭建**：首先需要创建一个新的Vue组件，使用Element UI的`<el-upload>`组件作为基础。

2. **添加上传前的校验逻辑**：在上传文件之前，你需要编写JavaScript代码来校验文件内容的行数。这通常涉及到在文件被选中后读取文件内容，并计算行数。

3. **实现行数校验功能**：可以通过监听`<el-upload>`的`change`事件来获取文件，然后使用`FileReader`对象读取文件内容，并使用正则表达式等方法来计算行数。

4. **使用Element UI的Message组件显示校验结果**：根据行数校验的结果，使用Element UI的`Message`组件来提示用户是否校验成功，或者给出错误提示。

下面是一个简单的示例代码：

<template>
  <el-upload
    class="upload-demo"
    action="//jsonplaceholder.typicode.com/posts/"
    :on-change="handleChange"
    :before-upload="beforeUpload"
  >
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleChange(file, fileList) {
      if (fileList.length > 0) {
        const maxRows = 100000;
        this.checkRowCount(file, maxRows);
      }
    },
    beforeUpload(file) {
      return false; // 阻止默认上传行为，因为我们需要先校验行数
    },
    checkRowCount(file, maxRows) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const content = e.target.result;
        // 使用正则表达式来计算换行符的数量
        const rowCount = (content.match(/\n/g) || []).length + 1;
        if (rowCount > maxRows) {
          this.$message.error(`文件行数超过限制，最多允许 ${maxRows} 行`);
          return;
        }
        this.$message.success('文件行数校验通过');
      };
      reader.readAsText(file); // 以文本形式读取文件
    },
    submitUpload() {
      // 在这里处理文件上传逻辑
    }
  }
};
</script>

<style>
/* 样式可以根据实际需求进行调整 */
.upload-demo .el-upload {
  width: 100%;
}
</style>

以上代码提供了一个基本的上传组件，并包含了一个行数校验的功能。注意，这里的行数校验是在用户选择了文件之后进行的，如果文件行数超过100000行，则会提示用户，并阻止上传。