js中单击按钮选择本地文件

发表于 更新于 分类于 ， ， 本文字数： 1.5k 阅读时长 ≈ 1 分钟

js 原生打开本地文件是通过设置 input 的 type='file'来实现的，但是它的界面很丑，往往达不到使用的要求，于是，我们通常的做法是通过一个 button 去触发 input 的事件，实现文件选择。

vue 实现

以下示例使用 quasar 组件开发。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
// template代码
<q-btn
  label="从Excel导入"
  dense
  size="sm"
  outline
  color="orange"
  @click="selectExcelFile"
></q-btn>
<input type="file" id="fileInput" style="display: none" @change="fileSelected" />

// excel模块
import XLSX from 'js-xlsx'

// js 代码
methods: {
  // 选择文件
  selectExcelFile() {
    const elem = document.getElementById('fileInput')
    elem.click()
    elem.value='' // 清空 vule，这样才可以再次选择文件
  },
  fileSelected(e) {     
      // 判断是否选择了文件
      if (e.target.files.length === 0) {
        return
      }

      // 获取选择的文件
      const file = e.target.files[0]

      // 获取选择的文件
      const file = e.target.files[0]

      const excelData = await this.readExcelData(file)
      if (!excelData) return

      // 其它操作
    },

  // 读取 excel 数据
  async readExcelData(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.onload = e => {
          const data = new Uint8Array(e.target.result)
          const workbook = XLSX.read(data, { type: 'array' })
          /* DO SOMETHING WITH workbook HERE */
          // 变成json
          const jsonObj = XLSX.utils.sheet_to_json(
            workbook.Sheets[workbook.SheetNames[0]]
          )
          resolve(jsonObj)
        }
        reader.onerror = () => {
          reject(false)
        }
        reader.readAsArrayBuffer(file)
      })
    }
}

选项说明

选项名 描述
multiple 表示可以多选文件
accept 用逗号隔开的 MIME 类型列表。

常见 MIME 类型列表