element plus ts语法 el-upload组件 报错信息不能使用？

el-upload的报错信息进了on-error文件上传失败时钩子，但是打印出来的数据被包裹了一层名为UploadAjaxError的对象包裹，后端返回的数据是{code: 1, msg: "['xxx','xxx','xxx']", data: null, ok: false}

尝试访问UploadAjaxError.msg直接undefined

看到有的方法是直接把多余的东西去掉，然后拿到返回的对象信息，也可以。

这里采用另一只方法

官网显示ts类型写为Error

在idea软件中，点击ctrl同时左键单击Error进入了lib.es2022.error.d.ts页面

我这里用ts就把形参error的类型定义为Error：(error: Error)

使用访问 形参.message即可拿到里面这层需要的数据
"{"code:: 1, "msg": "['xxx','xxx','xxx']", "data": null, "ok": false}"

但是使用的时候需要用JSON.parse(err.message)解析一下再用

我这里是公共提示上传失败信息，现在新加需求自定义弹窗展示错误信息，如果是自定义展示错误就把拿到的错误信息给传递过去。


组件完整代码如下

<!-- excel 导入组件 -->
<template>
	<el-dialog :title="prop.title" v-model="state.upload.open" :close-on-click-modal="false" draggable>
		<el-upload
			ref="uploadRef"
      v-loading="state.upload.isUploading"
      element-loading-text="上传中..."
      element-loading-background="white"
			:limit="1"
			accept=".xlsx, .xls"
			:headers="headers"
			:action="baseURL + other.adaptationUrl(url)"
			:disabled="state.upload.isUploading"
			:on-progress="handleFileUploadProgress"
			:on-success="handleFileSuccess"
			:on-error="handleFileError"
			:auto-upload="false"
      :on-change="handleChange"
      :file-list="fileLists"
      :show-file-list="true"
      drag
		>
			<i class="el-icon-upload"></i>
			<div class="el-upload__text">
				{{ $t('excel.operationNotice') }}
				<em>{{ $t('excel.clickUpload') }}</em>
			</div>
			<template #tip>
				<div class="el-upload__tip text-center">
					<span>{{ $t('excel.fileFormat') }}</span>
					<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="downExcelTemp" v-if="tempUrl"
						>{{ $t('excel.downloadTemplate') }}
					</el-link>
				</div>
			</template>
		</el-upload>
		<template #footer>
			<el-button type="primary" @click="submitFileForm" :disabled="state.upload.isUploading">{{ $t('common.confirmButtonText') }}</el-button>
			<el-button @click="state.upload.open = false" :disabled="state.upload.isUploading">{{ $t('common.cancelButtonText') }}</el-button>
		</template>
	</el-dialog>

	<!--校验失败错误数据-->
	<el-dialog :title="$t('excel.validationFailureData')" v-model="state.errorVisible">
		<el-table :data="state.errorData">
			<el-table-column property="lineNum" :label="$t('excel.lineNumbers')" width="100"></el-table-column>
			<el-table-column property="errors" :label="$t('excel.misDescription')" show-overflow-tooltip>
				<template v-slot="scope">
					<el-tag type="danger" v-for="error in scope.row.errors" :key="error">{{ error }}</el-tag>
				</template>
			</el-table-column>
		</el-table>
	</el-dialog>
</template>

<script setup lang="ts" name="upload-excel">
import { useMessage } from '/@/hooks/message';
import other from '/@/utils/other';
import { Session } from '/@/utils/storage';
import {ElMessage} from "element-plus";

const emit = defineEmits(['sizeChange', 'refreshDataList','getErrInfo']);//getErrInfo错误信息
const prop = defineProps({
	url: {
		type: String,
	},
	title: {
		type: String,
	},
	tempUrl: {
		type: String,
	},
  diyErrInfo: {//是否自定义展示错误信息
    type: Boolean,
    default: false
  }
});

const uploadRef = ref();

const state = reactive({
	errorVisible: false,
	errorData: [],
	dialog: {
		title: '',
		isShowDialog: false,
	},
	upload: {
		open: false,
		isUploading: false,
	},
});
const fileLists = ref([]);//文件列表
/**
 * 下载模板文件
 */
const downExcelTemp = () => {
	other.downBlobFile(other.adaptationUrl(prop.tempUrl), {}, 'temp.xlsx');
};

/**
 * 上传进度条变化事件
 */
const handleFileUploadProgress = () => {
	state.upload.isUploading = true;
};

/**
 * 上传失败事件处理
 */
const handleFileError = (err: Error) => {
  //必须用 (形参.message) 才能拿到错误信息对象 例如: err.message
  const errMessage = JSON.parse(err.message);//拿到的对象解析为可用的结果 赋值给变量errMessage

  if (prop.diyErrInfo) {
    //自定义错误信息显示
    emit('getErrInfo',errMessage);

  } else {
    //默认展示统一错误信息
    useMessage().error('上传失败,数据格式不合法!');
  }

	state.upload.open = false;
  state.upload.isUploading = false;
};

const handleChange = (file: { status: string; name: any; }, fileList: any) => {
  if (file.status === 'ready') {
    console.log("file.name===",file.name);
    fileLists.value = fileList;//变量和形参不能重名
  }
}
/**
 * 上传成功事件处理
 * @param {any} response - 上传成功的响应结果
 */
const handleFileSuccess = (response: any) => {
  console.log("response", response);
  state.upload.isUploading = false;
	state.upload.open = false;
	uploadRef.value.clearFiles();

	// 校验失败
	if (response.code === 1) {
		useMessage().error('导入失败，以下数据不合法');
		state.errorVisible = true;
		state.errorData = response.data;
		uploadRef.value.clearFiles();
		// 刷新表格
		emit?.('refreshDataList');
	} else {//code:0
		useMessage().success(response.msg ? response.msg : '导入成功');
		// 刷新表格
		emit?.('refreshDataList');
	}
};

/**
 * 提交表单，触发上传
 */
const submitFileForm = async () => {
  if (fileLists.value.length === 0) {
    ElMessage.warning('请先选择文件！');
    return
  }

  state.upload.isUploading = true;
  try {
    await uploadRef.value.submit();
  } catch (error) {
    handleFileError();
  }
};

/**
 * 显示上传文件对话框，并清除上传信息
 */
const show = () => {
	state.upload.isUploading = false;
	state.upload.open = true;
};

/**
 * 计算请求头部信息
 */
const headers = computed(() => {
	return {
		Authorization: 'Bearer ' + Session.getToken(),
		'TENANT-ID': Session.getTenant(),
	};
});

// 暴露变量
defineExpose({
	show,
});
</script>

<style scoped></style>

使用组件

const errMessages= ref([]);//错误信息
const isError = ref(false);//显示错误信息弹窗

 <upload-excel title="名称" @refreshDataList="getDataList" :diyErrInfo="true" @getErrInfo="getErrorInfo" ref="excelUploadRef"
      url="/drp-exam/questionBank/importHYQuestions" />
      
//获取导入上传的错误信息
const getErrorInfo = (errMessage: any) => {
  errMessages.value = JSON.parse(errMessage.msg);//返回的是字符串数组所以用JSON.parse解析成数组["x","x","x"]
  isError.value = true;
}

//关闭错误信息弹窗
const cancelError = () => {
  isError.value = false;
}

目前已实现功能，如有建议请评论区友好讨论。