Vue - 使用Element UI Upload / importExcelJs进行文件导入_elementui 引入 xlsx

1 情景一

需求背景：后端配合，点击"导入"按钮，弹出“导入”弹窗，将电脑本地Excel表格数据导入到页面中表格位置（需要调用后端接口），而页面中表格通过后端接口获取最新数据。
实现思路：弹窗嵌入 Element UI Upload 上传组件，获取到文件后调后端接口。

action: 上传的地址
file-list: 上传的文件列表, 例如: [{name: ‘food.jpg’, url: ‘https://xxx.cdn.com/xxx.jpg’}]
headers: 设置上传的请求头部（上传的文件可能是有固定格式的（表头），这个是在后端设定好了的，所以如果上传的文件格式不对可能会引起报错。）
before-upload: 上传文件之前的钩子，可作上传之前校验
on-error: 文件上传失败时的钩子
on-exceed: 文件超出个数限制时的钩子
on-success: 文件上传成功时的钩子
on-change: 文件状态改变时的钩子
this.$refs.fileUpload.submit(): 手动上传文件列表(fileUpload是自定义的名字)

• 组件代码

<template>
  <span>
    <el-button
      plain
      icon="el-icon-upload2"
      type="primary"
      size="mini"
      :disabled="disabled"
      @click="importFile"
    >{{ $t('import') }}</el-button>
    <el-dialog
      v-if="open"
      :title="importTitle"
      :visible.sync="open"
      width="500px"
      append-to-body
      :close-on-click-modal="false"
      :show-close="false"
      @close="cancel"
    >
      <div v-if="isShowRecord" class="record-btn">
        <el-button icon="el-icon-time" type="primary" size="mini" @click="recordBtnClick">
          <span>{{ recordText }}</span>
        </el-button>
      </div>
      <div style="text-align: center;">
        <el-upload
          ref="fileUpload"
          multiple
          :auto-upload="false"
          :action="uploadFileUrl"
          :before-upload="handleBeforeUpload"
          :file-list="fileList"
          :limit="limit"
          :on-error="handleUploadError"
          :on-exceed="handleExceed"
          :on-success="handleUploadSuccess"
          :on-change="handleChange"
          :headers="headers"
          class="upload-file-uploader"
        >
          <div style="border:1px dashed #e9e9e9">
            <i class="el-icon-plus avatar-uploader-icon" style="margin:80px;font-size: 25px;" />
          </div>
          <!-- 上传提示 -->
          <div v-if="showTip" slot="tip" class="el-upload__tip">
            {{ $t("pleaseUpload") }}
            <template v-if="fileSize">
              {{ $t("sizeLess") }}
              <b style="color: #f56c6c">{{ fileSize }}MB</b>
            </template>
            <template v-if="fileType">
              {{ $t("formatIs") }}
              <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
            </template>
            {{ $t("file") }}
          </div>
        </el-upload>
      </div>
      <div class="template">
        <!-- <form v-show="false" id="templateForm" :action="templateUrl" method="get" /> -->
        <span @click="downloadFile">{{ $t("downloadThisTemplate") }}</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">{{ $t('confirm') }}</el-button>
        <el-button @click="cancel">{{ $t('cancel') }}</el-button>
      </div>
    </el-dialog>
  </span>
</template>
<script>
import { getToken } from '@/utils/auth'
import { downloadGet } from '@/utils/request'
import moment from 'moment'
import $ from '@/i18n/index'

export default {
  name: 'FileImport',
  props: {
    // 是否禁用导入按钮
    disabled: {
      type: Boolean,
      default: false
    },
    // 导入弹窗标题
    importTitle: {
      type: String,
      default: () => {
        return $.t('fileImport')
      }
    },
    // 数量限制
    limit: {
      type: Number,
      default: 1
    },
    // 大小限制(MB)
    fileSize: {
      type: Number,
      default: 20
    },
    // 文件类型, 例如['png', 'jpg', 'jpeg']
    fileType: {
      type: Array,
      default: () => ['csv']
    },
    // 是否显示提示
    isShowTip: {
      type: Boolean,
      default: true
    },
    // 下载模板路径
    downLoadUrl: { type: String, default: null },
    // 下载的全拼路径
    fullPathUrl: { type: String, default: null },
    // 模板名称
    fileName: { type: String, default: moment().format('yyyyMMDDHHmmss') },
    // 导入数据路径
    importUrl: { type: String, default: null },
    // 是否展示导入导出记录按钮
    isShowRecord: {
      type: Boolean,
      default: false
    },
    // 导入导出记录文字
    recordText: {
      type: String,
      default: () => {
        return $.t('importAndExportRecord')
      }
    }
  },
  data() {
    return {
      open: false,
      number: 0,
      baseUrl: process.env.VUE_APP_BASE_API,
      // templateUrl:
      //   this.fullPathUrl || process.env.VUE_APP_BASE_API + this.downLoadUrl,
      fileList: []
    }
  },
  computed: {
    headers() {
      return { Authorization: getToken() }
    },

    // 是否显示提示
    showTip() {
      return this.isShowTip && (this.fileType || this.fileSize)
    },

    // 上传文件服务器地址
    uploadFileUrl() {
      return process.env.VUE_APP_BASE_API + this.importUrl
    }

    // templateUrl() {
    //   return this.fullPathUrl || process.env.VUE_APP_BASE_API + this.downLoadUrl
    // }
  },
  methods: {
    importFile() {
      this.open = true
    },
    submitForm() {
      if (this.fileList.length === 0) {
        this.$modal.msgError(this.$t('pleaseImportFile'))
        return
      }
      this.$refs.fileUpload.submit()
    },
    cancel() {
      this.$refs.fileUpload.clearFiles()
      this.open = false
      this.$emit('importSuccess')
    },
    // 上传前校检格式和大小
    handleBeforeUpload(file) {
      // 校检文件类型
      if (this.fileType) {
        const fileName = file.name.split('.')
        const fileExt = fileName[fileName.length - 1]
        const isTypeOk = this.fileType.indexOf(fileExt) >= 0
        if (!isTypeOk) {
          this.$modal.msgError(
            `${this.$t('fileTypeErrorUpload')}${this.fileType.join(
              '/'
            )}${this.$t('file')}`
          )
          return false
        }
      }
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize
        if (!isLt) {
          this.$modal.msgError(
            `${this.$t('uploadFileSizeLess')} ${this.fileSize} MB!`
          )
          return false
        }
      }
      this.$modal.loading(this.$t('waitForUpload'))
      this.number++
      return true
    },
    // 文件个数超出
    handleExceed() {
      this.$modal.msgError(`${this.$t('uploadFileNumberLess')} ${this.limit}`)
    },
    // 上传失败
    handleUploadError() {
      this.$modal.msgError(this.$t('uploadFail'))
      this.$modal.closeLoading()
    },
    // 上传成功回调
    handleUploadSuccess(res, file) {
      if (res.code === 0) {
        this.$message({ type: 'success', message: this.$t('uploadSuccess') })
        this.cancel()
        this.$emit('handleUploadSuccess')
      } else {
        this.number--
        this.$modal.msgError(res.msg)
        this.$refs.fileUpload.handleRemove(file)
      }
      this.$modal.closeLoading()
    },
    downloadFile() {
      // document.getElementById('templateForm').submit()
      let dowloadUrl = this.downLoadUrl
      if (this.fullPathUrl) {
        dowloadUrl = this.fullPathUrl
      }
      downloadGet(dowloadUrl, `${this.fileName}.${this.fileType}`, {})
    },
    recordBtnClick() {
      this.$emit('recordBtnClick')
    },
    handleChange(file, fileList) {
      this.fileList = fileList
    }
  }
}
</script>
<style lang="scss" scoped>
.template {
  text-align: center;
  color: #1890ff;
  padding: 10px;
  span:hover {
    cursor: pointer;
    border-bottom: 1px solid #1890ff;
  }
}

.record-btn {
  position: absolute;
  right: 18px;
  top: 18px;
}
</style>
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263

// 通用下载方法，blob形式
export function downloadGet(url, filename, config) {
  downloadLoadingInstance = Loading.service({
    text: '正在下载数据，请稍候',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  return service
    .get(url, {
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      responseType: 'blob',
      ...config
    })
    .then(async(data) => {
      const isLogin = await blobValidate(data)
      if (isLogin) {
        const blob = new Blob([data])
        saveAs(blob, filename)
      } else {
        const resText = await data.text()
        const rspObj = JSON.parse(resText)
        const errMsg =
          errorCode[rspObj.code] || rspObj.msg || errorCode['default']
        Message.error(errMsg)
      }
      downloadLoadingInstance.close()
    })
    .catch((r) => {
      console.error(r)
      Message.error('下载文件出现错误，请联系管理员！')
      downloadLoadingInstance.close()
    })
}
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

import Cookies from 'js-cookie'

const TokenKey = 'Admin-Token'

export function getToken() {
  return Cookies.get(TokenKey)
}
1
2
3
4
5
6
7

• 使用组件

 <FileImport
      down-load-url="/client/template/export_template/sec_type"
      import-url="/client/sec_type/import"
      file-name="导入持仓"
/>
1
2
3
4
5

2 情景二

需求背景：纯前端实现文件导入的情景。例如，一个常规excel文件填写模板，在用户的电脑上，用户上传完后，还可以在预览展示时，在线修改，改完可以下载，也可以将数据给到服务端，但这时，比如这模板数据通常不多，比如是一个团队成员这样的数据，通过文件流的形式传给后端，可能不是很理想，倒不如前端解析传那几行数据就行。
实现思路：importExcel.js 导入excel文件

1. 使用html支持上传标签从本地获取文件，例如type为file的input，el-upload等。
2. 利用FileReader将文件读取为二进制字符串。
3. 使用XLSX插件的XLSX.read()方法，将二进制字符串转换成excel文件的工作蒲对象workbook（简写成wb）。
4. 通过XLSX.utils.sheet_to_json()方法，从wb中获取第一张 Sheets表格数据并将其转换为json数据。
5. 重组json数据生成数组，即是根据自己的定义的列字段名，重新组成符合自己需求的json数据。因为从excel中提取的数据是没有字段名或字段名不符合要求的，而我们需要渲染在页面表格中又确实需要合适的字段名。

/* eslint-disable */
/* 导入excel文件 */
/**
 * @param file 文件流
 * @param tableTemplate 要导入的表格模板，一个数组，如：
 * tableTemplate: ['userCode', 'userName', 'department', 'major', 'position']，其中的值
 * 为表格的字段名，注意字段的顺序应与实际的导入excel一致。
 */
export default function importExcel (file, tableTemplate) {
  return new Promise((resolve, reject) => {
    let f = file.raw // 获取文件内容
    // 通过DOM取文件数据
    let rABS = false // 是否将文件读取为二进制字符串
    let reader = new FileReader()
    FileReader.prototype.readAsBinaryString = function (f) {
      let binary = ''
      let rABS = false // 是否将文件读取为二进制字符串
      let wb // 读取完成的数据
      let outdata
      let reader = new FileReader()
      reader.onload = function (e) {
        let bytes = new Uint8Array(reader.result)
        let length = bytes.byteLength
        for (let i = 0; i < length; i++) {
          binary += String.fromCharCode(bytes[i])
        }
        let XLSX = require('xlsx')
        if (rABS) {
          wb = XLSX.read(btoa(binary), { // 手动转化
            type: 'base64'
          })
        } else {
          wb = XLSX.read(binary, {
            type: 'binary'
          })
        }
        outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) // outdata就是表格中的值

        let arr = []
        // 下面是数据解析提取逻辑
        if (tableTemplate.length > 0) {
          let tempArr = Object.keys(outdata[0])
          let tempArrNew = []
          for (let i in tempArr) {
            for (let k in tableTemplate) {
              if (i === k) {
                tempArrNew.push({fieldE: tableTemplate[k], fieldC: tempArr[i]})
              }
            }
          }

          tempArr = tempArrNew
          outdata.map(item => {
            let obj = {}
            tempArr.map(temp2 => {
              obj[temp2.fieldE] = item[temp2.fieldC]
            })
            arr.push(obj)
          })
        }

        resolve(arr)
      }
      reader.readAsArrayBuffer(f)
    }

    if (rABS) {
      reader.readAsArrayBuffer(f)
    } else {
      reader.readAsBinaryString(f)
    }
  })
}
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
62
63
64
65
66
67
68
69
70
71
72
73