feat: uploader 组件新增 failed 状态及示例

hellof2e · Jun 13, 2023 · faca121 · faca121
1 parent 8bb476b
commit faca121
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 10 deletions.
diff --git a/packages/quarkd/src/uploader/demo.vue b/packages/quarkd/src/uploader/demo.vue
@@ -15,6 +15,14 @@
         preview
       ></quark-uploader>
     </div>
+    <h2>{{ translate("status") }}</h2>
+    <div class="flex">
+      <quark-uploader
+        @afterread="afterReadStatus"
+        ref="uploadStatus"
+        preview
+      ></quark-uploader>
+    </div>
     <h2>{{ translate("limit") }}</h2>
     <div class="flex">
       <quark-uploader maxcount="2" preview></quark-uploader>
@@ -58,6 +66,7 @@ export default createDemo({
     const preview = ref(null);
     const preview2 = ref(null);
     const before = ref(null);
+    const uploadStatus = ref(null);
     const oversizeRef = ref(false);
     const previewUrls = [
       "https://m.hellobike.com/resource/helloyun/15697/9VgwC_Screenshot_20220215_191457_com.jingyao.easybike.jpg?x-oss-process=image/quality,q_80",
@@ -68,6 +77,7 @@ export default createDemo({
         "zh-CN": {
           basic: "基础用法",
           preview: "文件预览",
+          status: "上传状态",
           previewMode: "预览模式",
           limit: "限制上传数量",
           size: "限制上传大小",
@@ -83,6 +93,7 @@ export default createDemo({
         "en-US": {
           basic: "Basic Usage",
           preview: "File Preview",
+          status: "upload status",
           previewMode: "File Preview Mode",
           limit: "Limit Uploads Number",
           size: "Limit Uploads Size",
@@ -100,6 +111,16 @@ export default createDemo({
     onMounted(() => {
       preview.value.setPreview(previewUrls);
       preview2.value.setPreview(previewUrls);
+      uploadStatus.value.setPreview(previewUrls);
+      const tasks = uploadStatus.value.tasks;
+      tasks.forEach((i, index) => {
+        if (!index) {
+          uploadStatus.value.setStatus({
+            ...i,
+            status: "uploading",
+          });
+        }
+      });
       before.value.beforeUpload = beforeUpload;
     });
     const sleep = (time) => {
@@ -121,7 +142,7 @@ export default createDemo({
       console.log(items, maxsize);
       Toast.text(`${translate("toast.overSize")}`);
     };
-    const uploadAction = async (item) => {
+    const uploadAction = async (item, status = "done") => {
       preview.value.setStatus({
         ...item,
         status: "uploading",
@@ -130,7 +151,7 @@ export default createDemo({
       await sleep(2000);
       preview.value.setStatus({
         ...item,
-        status: "done",
+        status,
       });
       Toast.success("上传成功");
     };
@@ -142,12 +163,26 @@ export default createDemo({
       if (Array.isArray(file)) {
         for (let i = 0; i < file.length; i++) {
           const item = file[i];
-          uploadAction(item);
+          if (i === 0) uploadAction(item);
+          else uploadAction(item);
         }
       } else {
         uploadAction(file);
       }
     };
+    const afterReadStatus = async ({ detail: file }) => {
+      uploadStatus.value.setStatus({
+        ...file,
+        status: "uploading",
+        message: "上传中",
+      });
+      await sleep(2000);
+      uploadStatus.value.setStatus({
+        ...file,
+        status: "failed",
+      });
+      Toast.success(`${file.file.name}上传失败`);
+    };
     onBeforeRouteLeave(() => {
       const nodes = document.querySelectorAll("quark-image-preview ");
       nodes.forEach((i) => (i.open = false));
@@ -157,11 +192,13 @@ export default createDemo({
       preview,
       preview2,
       before,
+      uploadStatus,
       beforeUpload,
       oversize,
       oversizeRef,
       afterRead,
       translate,
+      afterReadStatus,
     };
   },
 });

diff --git a/packages/quarkd/src/uploader/doc.zh-CN.md b/packages/quarkd/src/uploader/doc.zh-CN.md
@@ -27,7 +27,7 @@ function afterread(file) {
 默认开启预览功能
 
 ```html
-<quark-uploader preview ref="preview"></quark-uploader>
+<quark-uploader preview ref="uploadStatus"></quark-uploader>
 ```
 
 ```js
@@ -37,6 +37,38 @@ mounted() {
 }
 ```
 
+### 上传状态
+
+默认三种状态 uploading、 done、failed，其中 failed 会移除当前失败文件, 默认为 done
+
+```html
+<quark-uploader preview ref="preview" @afterread="afterReadStatus"><quark-uploader>
+```
+
+```js
+mounted() {
+  this.$refs.uploadStatus.
+  setPreview(['https://img.yzcdn.cn/vant/leaf.jpg']);
+},
+methods: {
+    // 暂时只做了单独上传示例，多选上传方法也一样
+    async afterReadStatus({ detail: file }) {
+      cosnt { uploadStatus }= this.$refs
+      uploadStatus.value.setStatus({
+        ...file,
+        status: "uploading",
+        message: "上传中",
+      });
+      await sleep(2000);
+      uploadStatus.value.setStatus({
+        ...file,
+        status: "failed",
+      });
+      Toast.success(`${file.file.name}上传失败`);
+  };
+}
+```
+
 ### 限制上传数量
 
 超过数量，隐藏多余部分并且隐藏上传按钮
@@ -130,6 +162,7 @@ beforeUpload(files) {
 | setPreview      | 初始化预览数据，用法 uploader.setPreview(data) | `(url: string[]) => void`         |
 | beforeDelete    | 删除前置, 需配合 onRemove 一起使用，用法 uploader.beforeDelete = fn      | `(file, {index: number}) => void` |
 | closePreview    | 手动关闭预览弹窗方法                           |                                   |
+| setStatus    | 上传期间设置上传状态       uploader.setStatus(file)                    | fn(file)
 
 ## 样式变量
 

diff --git a/packages/quarkd/src/uploader/index.tsx b/packages/quarkd/src/uploader/index.tsx
@@ -260,12 +260,16 @@ class QuarkUploader extends QuarkElement {
 
   // 设置状态
   setStatus(file: UploaderFileListItem) {
-    this.tasks = this.tasks.map((i) => {
-      if (i.id === file.id) {
-        Object.assign(i, file);
-      }
-      return i;
-    });
+    if (file.status === "failed") {
+      this.tasks = this.tasks.filter((i) => i.id !== file.id);
+    } else {
+      this.tasks = this.tasks.map((i) => {
+        if (i.id === file.id) {
+          Object.assign(i, file);
+        }
+        return i;
+      });
+    }
   }
 
   closePreview() {