From 101e91a7613c6180f5586c06f78af283e63ed064 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Wed, 14 Dec 2022 17:14:29 +0800
Subject: [PATCH] perf: improve the prompt for upload failure of the upload
 component (#769)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind improvement

#### What this PR does / why we need it:

优化上传组件的异常提示信息。

#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/2933
Ref https://github.com/halo-dev/halo/issues/2932 https://github.com/halo-dev/halo/issues/2931

#### Screenshots:

<img width="794" alt="image" src="https://user-images.githubusercontent.com/21301288/207272593-b94efb0a-7033-4ec1-b1eb-f2e3871b34f0.png">
<img width="674" alt="image" src="https://user-images.githubusercontent.com/21301288/207272682-0c223d29-8c4f-45b0-a8d5-2432a97835c6.png">


#### Special notes for your reviewer:

测试方式：

1. 进入附件上传、插件安装、主题安装界面。
2. 上传不符合规则的文件，比如主题可以上传一个不是主题的 zip 或者 Halo 1.x 版本的 zip。
3. 观察是否有异常提示。

#### Does this PR introduce a user-facing change?

```release-note
优化 Console 端上传组件的异常提示信息。
```
---
 src/components/upload/UppyUpload.vue | 14 ++++++++++++++
 src/utils/api-client.ts              |  2 +-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/upload/UppyUpload.vue b/src/components/upload/UppyUpload.vue
index ab8482ae..3455d900 100644
--- a/src/components/upload/UppyUpload.vue
+++ b/src/components/upload/UppyUpload.vue
@@ -7,6 +7,8 @@ import type { Restrictions } from "@uppy/core";
 import XHRUpload from "@uppy/xhr-upload";
 import zh_CN from "@uppy/locales/lib/zh_CN";
 import { computed, onUnmounted } from "vue";
+import { Toast } from "@halo-dev/components";
+import type { ProblemDetail } from "@/utils/api-client";
 
 const props = withDefaults(
   defineProps<{
@@ -50,6 +52,18 @@ const uppy = computed(() => {
     fieldName: props.name,
     method: props.method,
     limit: 5,
+    getResponseError: (responseText) => {
+      const response = JSON.parse(responseText);
+      const { title, detail } = (response || {}) as ProblemDetail;
+      const message = [title, detail].filter(Boolean).join(": ");
+
+      if (message) {
+        Toast.error(message, { duration: 5000 });
+
+        return new Error(message);
+      }
+      return new Error("Internal Server Error");
+    },
   });
 });
 
diff --git a/src/utils/api-client.ts b/src/utils/api-client.ts
index 202fc9ef..363b1f30 100644
--- a/src/utils/api-client.ts
+++ b/src/utils/api-client.ts
@@ -44,7 +44,7 @@ const axiosInstance = axios.create({
   withCredentials: true,
 });
 
-interface ProblemDetail {
+export interface ProblemDetail {
   detail: string;
   instance: string;
   status: number;