feat(upload): 添加upload 移除图片功能

src/upload/demos/mobile.vue

@@ -14,11 +14,15 @@
     <tdesign-demo-block title="03 样式自定义" summary="单选上传">
       <CustomDemo />
     </tdesign-demo-block>
+    <tdesign-demo-block title="04 移除图片" summary="单选上传">
+      <RemoveDemo />
+    </tdesign-demo-block>
   </div>
 </template>
 <script setup lang="ts">
 import BaseDemo from './base.vue';
 import CustomDemo from './custom.vue';
 import MultipleDemo from './multiple.vue';
 import StatusDemo from './status.vue';
+import RemoveDemo from './remove.vue';
 </script>

src/upload/demos/remove.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="upload-demo">
+    <div class="upload-title">单选上传</div>
+    <t-upload
+      ref="uploadRef"
+      v-model="files"
+      :multiple="true"
+      :max="6"
+      accept="image/*"
+      action="https://apifoxmock.com/m1/5139971-4803795-cac090a1/test"
+      :format-response="formatResponseUpload"
+      @success="onSuccessUpload"
+      @fail="onFailUpload"
+    >
+    </t-upload>
+    <t-button @click="clear">清空全部</t-button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { Message, Toast } from 'tdesign-mobile-vue';
+
+const files = ref([]);
+const uploadRef = ref();
+console.log('uploadRef', uploadRef);
+const onSuccessUpload = (context: any) => {
+  console.log(context);
+};
+const formatResponseUpload = (response: any, context: any) => {
+  // Define your response formatting logic here
+  console.log(response);
+
+  // response.error = response.msg || '上传失败22222';
+
+  console.log('formatResponse', response);
+  return response;
+};
+const onFailUpload = (context: any) => {
+  console.error('Upload failed', context);
+  // Message.warning(context.response.error);
+  // Toast({
+  //   style: { color: 'red' },
+  //   // theme: "error",
+  //   direction: 'row',
+  //   message: context.response.error,
+  //   onDestroy: () => {
+  //     console.log('需要清除图片内容');
+  //     uploadRef.value.removeAllFiles();
+  //   },
+  // });
+
+  // response error 有问题 不显示错误信息
+};
+
+const clear = () => {
+  uploadRef.value.removeAllFiles();
+};
+</script>
+
+<style scoped lang="less">
+.upload-demo {
+  background: var(--bg-color-demo, #fff);
+  .upload-title {
+    font-size: 16px;
+    color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
+    padding: 12px 16px 0;
+  }
+}
+</style>

src/upload/hooks/useUpload.ts

@@ -309,6 +309,13 @@ export default function useUpload(props: TdUploadProps) {
     );
   }
 
+  function onInnerRemoveAll() {
+    sizeOverLimitMessage.value = '';
+    toUploadFiles.value = [];
+    props.onWaitingUploadFilesChange?.({ files: [], trigger: 'remove' });
+    setUploadValue([], { trigger: 'remove' });
+  }
+
   function onInnerRemove(p: UploadRemoveContext) {
     sizeOverLimitMessage.value = '';
     p.e.stopPropagation?.();
@@ -384,5 +391,6 @@ export default function useUpload(props: TdUploadProps) {
     onNormalFileChange,
     onInnerRemove,
     cancelUpload,
+    onInnerRemoveAll,
   };
 }

src/upload/upload.tsx

@@ -43,6 +43,7 @@ export default defineComponent({
       uploadFiles,
       onNormalFileChange,
       onInnerRemove,
+      onInnerRemoveAll,
       cancelUpload,
     } = useUpload(props);
 
@@ -115,13 +116,17 @@ export default defineComponent({
         );
       }
     };
+    const removeAllFiles = () => {
+      onInnerRemoveAll();
+    };
     expose({
       upload: inputRef.value,
       uploading,
       triggerUpload,
       uploadFiles,
       cancelUpload,
       uploadFilePercent,
+      removeAllFiles, // 新增的方法
     });
     return () => {
       return (