vue2实现导入excel文件

• <el-upload>:使用 Element UI 框架的上传组件，用于处理文件上传的相关操作。

            <el-upload class="upload-demo" action="#" :on-change="handleChange" :show-file-list="false"
                :auto-upload="false">
                <el-button size="mini" icon="el-icon-upload2" type="warning">导入</el-button>
            </el-upload>

1. class="upload-demo": 为上传组件添加了一个样式类名为 "upload-demo"，这可能用于自定义样式。

2. action="#": 上传文件的目标地址，这里设置为 #，表示上传到当前页面。

3. :on-change="handleChange": 当文件上传状态发生变化时，调用名为 handleChange 的方法。

4. :show-file-list="false": 设置为 false，表示不显示文件列表。

5. :auto-upload="false": 设置为 false，表示不自动上传文件，需要手动触发。

6. <el-button>: Element UI 按钮组件，触发文件选择的操作。

7. size="mini": 设置按钮大小为迷你型。

8. icon="el-icon-upload2": 按钮图标为 Element UI 的上传图标。

9. type="warning": 按钮类型为警告样式。

10. @change="handleChange(file)": 当文件选择发生变化时，调用 handleChange 方法，并将选择的文件作为参数传递给该方法。

        // 导入
        handleChange(file) {
            const fileType = file.name.substring(file.name.lastIndexOf('.') + 1);

            if (fileType === 'xlsx' || fileType === 'xls') {
                this.importFile(file.raw);
            } else {
                this.$message.warning('附件格式错误，请重新上传！');
            }
        },
        async importFile(file) {

            const data = new FormData();
            data.append('file', file);

            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)',
            });
            try {
                const res = await operationTargetimport(data)
                this.$message({
                    message: '导入成功',
                    type: 'success'
                });
                this.$router.go(0)
                loading.close();
            }
            catch (error) {

                const blob = new Blob([error.response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
                const link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = '错误提示.xlsx';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                this.$message.error('上传失败,请查看excel错误信息');
                loading.close();
            }

        },

1. handleChange(file) { ... }: 定义了 handleChange 方法，处理文件变化的逻辑。

2. const fileType = file.name.substring(file.name.lastIndexOf('.') + 1);: 获取文件类型，通过截取文件名的后缀。

3. 文件类型判断逻辑：如果是 'xlsx' 或 'xls' 类型，则调用 importFile 方法进行文件导入，否则给出格式错误的提示。

4. async importFile(file) { ... }: 定义了 importFile 方法，处理文件导入的逻辑。

5. 创建 FormData 对象，将文件添加到其中。

6. 使用 Element UI 的 loading 组件显示加载状态。

7. 使用 Axios 发送 POST 请求，调用 operationTargetimport 接口，上传文件。

8. 成功时显示导入成功的消息，刷新页面，并关闭 loading 状态。

9. 失败时处理异常，生成包含错误信息的 Excel 文件并提供下载，显示上传失败的消息，并关闭 loading 状态。

10. export const operationTargetimport = (data) => { ... }: 导出了一个名为 operationTargetimport 的方法，该方法使用 Axios 发送 POST 请求，上传文件到指定的接口 /operationTarget/upload，并设置请求头为 multipart/form-data 类型。

export const operationTargetimport = (data) => {

  return request({
    url: '/operationTarget/upload',
    method: 'POST',
    data,
//响应类型
    responseType: 'arraybuffer',
//请求头设置
    headers: {
      'Content-Type': 'multipart/form-data'
    },
  })
}

在这段代码中，responseType: 'arraybuffer'是一个设置用于指定HTTP请求的响应格式。这是在使用类似于Axios的HTTP客户端时常见的配置。下面是这个设置的具体含义：

1. ArrayBuffer: 当你将responseType设置为'arraybuffer'时，意味着你期望服务器的响应数据是一个二进制数组。ArrayBuffer是JavaScript中的一种数据类型，用于表示通用的、固定长度的原始二进制数据缓冲区。

2. 应用场景: 这种类型的响应格式通常用于处理非文本文件，比如图片、PDF文件、Excel文件等二进制格式的数据。在这段代码中，由于涉及到上传和处理Excel文件，使用'arraybuffer'作为响应类型可以方便地处理二进制数据。

3. 后续处理: 获取到ArrayBuffer类型的响应后，可以根据需要将其转换为其他格式。例如，如果是一个Excel文件，可能会进一步处理或直接提供给用户下载。