Element 组件 el-upload 如何获取上传失败时的返回信息？

2024-01-29 21:01:38

前言

在处理el-upload上传组件在上传失败时可以使用on-error钩子函数来显示后端返回的错误信息。但在打印出返回的err发现返回的格式不是能简单获取的，这篇文章将提供两种获取后端返回错误信息的解决方案。

方法一

this.$refs.upload.uploadFiles = function() {
  const formData = new FormData();
  formData.append("file", this.file);
  axios.post("/api/upload", formData, {
    headers: {
      "Content-Type": "multipart/form-data",
    },
  }).then((response) => {
    // 上传成功
  }).catch((err) => {
    if (err.response && err.response.data) {
      // 获取后端返回的错误信息
      const errorMessage = err.response.data.message;
      // 显示错误信息
      this.$message.error(errorMessage);
    } else {
      // 处理其他错误情况
    }
  });
};

方法二

this.$refs.upload.uploadFiles = function() {
  const formData = new FormData();
  formData.append("file", this.file);
  axios.post("/api/upload", formData, {
    headers: {
      "Content-Type": "multipart/form-data",
    },
  }).then((response) => {
    // 上传成功
  }).catch((err) => {
    // 获取后端返回的错误信息
    let errorMessage = "上传失败";
    if (err.response && err.response.data) {
      errorMessage = err.response.data.message;
    } else if (err.request) {
      // 请求超时或网络错误
      errorMessage = "请求超时或网络错误";
    } else {
      // 其他错误
      errorMessage = "其他错误";
    }
    // 显示错误信息
    this.$message.error(errorMessage);
  });
};