vue+elementUl导入文件方式(判断文件格式)

下面是详细讲解“vue+elementUl导入文件方式(判断文件格式)”的完整攻略。

1. 需要用到的技术栈

本文使用的技术栈为：Vue + ElementUI。

2. 文件导入方式

Vue + ElementUI 实现文件的导入方式主要分为以下几个步骤：

2.1 导入 ElementUI Upload 组件

ElementUI 提供了 Upload 组件，可用于实现文件上传功能，故我们需要先导入该组件。具体方法为在 Vue 文件的顶部添加以下代码：

import { Upload } from 'element-ui'

同时，在 Vue 文件的 components 属性中添加：

components: { Upload }

2.2 定义上传文件的方法

为了实现文件上传功能，需要在 Vue 文件中定义一个上传文件的方法。具体实现如下：

methods: {
  // 上传文件
  handleUpload (file, fileList) {
    // 1. 判断文件格式是否为 CSV 格式
    if (file.raw.type !== 'text/csv') {
      this.$message.error('文件格式不正确，请上传 CSV 格式的文件')
      return
    }

    // 2. 处理 CSV 文件
    // ...
  }
}

以上方法中，我们首先判断上传文件的格式是否为 CSV 格式，如果不是，则弹出错误提示信息。

2.3 渲染 Upload 组件

上传文件的方法定义完成后，我们需要在 Vue 文件中渲染 Upload 组件，并绑定刚刚定义的方法。具体实现如下：

<template>
  <div>
    <upload
      :http-request="handleUpload"
      :file-list="fileList"
      :accept="'text/csv'"
      drag
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">仅支持 CSV 文件</div>
    </upload>
  </div>
</template>

以上代码中，我们定义了一个名为 upload 的组件，设置了组件的样式以及提示信息。同时，将组件的 httpRequest 属性绑定到刚刚定义的上传文件方法，将 fileList 属性绑定到 Vue 实例中的 fileList 数据，以便在上传文件成功后显示文件列表。

2.4 文件处理

文件上传成功后，我们还需要对文件进行处理。具体实现方法因应用场景而异，这里不再赘述。

3. 示例说明

3.1 示例一

以下代码实现了一个简单的上传文件功能。

<template>
  <div>
    <upload
      :http-request="handleUpload"
      :file-list="fileList"
      :accept="'text/csv'"
      drag
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">仅支持 CSV 文件</div>
    </upload>
  </div>
</template>

<script>
import { Upload } from 'element-ui'

export default {
  components: { Upload },
  data () {
    return {
      fileList: []
    }
  },
  methods: {
    // 上传文件
    handleUpload (file, fileList) {
      // 1. 判断文件格式是否为 CSV 格式
      if (file.raw.type !== 'text/csv') {
        this.$message.error('文件格式不正确，请上传 CSV 格式的文件')
        return
      }

      // 2. 处理 CSV 文件
      // ...

      // 3. 将上传的文件添加到 fileList 中
      this.fileList.push(file)
    }
  }
}
</script>

3.2 示例二

以下代码实现了一个上传 Excel 文件，并将其转化为 JSON 格式的功能。

<template>
  <div>
    <upload
      :http-request="handleUpload"
      :file-list="fileList"
      :accept="'.xlsx, .xls'"
      drag
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将 Excel 文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">仅支持 Excel 文件</div>
    </upload>
    <table border="1">
      <thead>
        <tr>
          <th v-for="(column, index) in columns">{{ column }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, rowIndex) in data">
          <td v-for="(value, columnIndex) in row">{{ value }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { Upload } from 'element-ui'
import xlsx from 'xlsx'

export default {
  components: { Upload },
  data () {
    return {
      fileList: [],
      columns: [],
      data: []
    }
  },
  methods: {
    // 上传 Excel 文件，将其转化为 JSON 格式
    handleUpload (file, fileList) {
      const reader = new FileReader()
      reader.onload = () => {
        const data = new Uint8Array(reader.result)
        const workbook = xlsx.read(data, { type: 'array' })
        const worksheet = workbook.Sheets[workbook.SheetNames[0]]
        const json = xlsx.utils.sheet_to_json(worksheet, { header: 1 })
        this.columns = json[0]
        this.data = json.slice(1)
      }
      reader.readAsArrayBuffer(file.raw)
      this.fileList.push(file)
    }
  }
}
</script>

以上代码中，我们新增了一个名为 xlsx 的包，用于实现 Excel 文件的读取和转换操作。在 handleUpload 方法中，我们使用 xlsx 实现了 Excel 文件到 JSON 格式的转换，同时在文件上传成功后，将上传的文件添加到 fileList 中以便显示文件列表。最后，我们增加了一个 table 元素，用于展示转换后的 JSON 数据。