feat: ✨ Upload上传组件新增支持上传视频和文件 (#412)

closes #186  and #336

Author: Moonofweisheng

.vscode/settings.json

@@ -40,5 +40,6 @@
   "i18n-ally.localesPaths": [
     "src/uni_modules/wot-design-uni/locale",
     "src/uni_modules/wot-design-uni/locale/lang"
-  ]
+  ],
+  "common-intellisense.ui": []
 }

docs/component/cell.md

@@ -79,7 +79,7 @@
 通过设置 `clickable` 开启点击反馈，之后可以监听`click`事件。
 
 ```html
-<wd-toast id="wd-toast" />
+<wd-toast />
 <wd-cell title="标题文字" value="内容" clickable @click="toast" />
 ```
 

docs/component/upload.md

@@ -4,12 +4,9 @@
     <wd-privacy-popup></wd-privacy-popup>
     <!-- #endif -->
     <wd-message-box></wd-message-box>
-    <wd-toast id="wd-toast"></wd-toast>
+    <wd-toast></wd-toast>
     <demo-block title="基本用法">
-      <wd-upload :file-list="fileList1" image-mode="aspectFill" :action="action" @change="handleChange1"></wd-upload>
-    </demo-block>
-    <demo-block title="多选上传">
-      <wd-upload :file-list="fileList2" multiple :action="action" @change="handleChange2"></wd-upload>
+      <wd-upload accept="image" :file-list="fileList" image-mode="aspectFill" :action="action" @change="handleChange"></wd-upload>
     </demo-block>
     <demo-block title="最大上传数限制">
       <wd-upload :file-list="fileList3" :limit="3" :action="action" @change="handleChange3"></wd-upload>
@@ -48,32 +45,58 @@
     <!-- <demo-block title="上传至oss">
       <wd-upload :file-list="fileList11" action="https://xxx.aliyuncs.com" :build-form-data="buildFormData" @change="handleChange11"></wd-upload>
     </demo-block> -->
+
+    <demo-block title="上传视频">
+      <wd-upload accept="video" multiple :file-list="fileList1" :action="action" @change="handleChange1"></wd-upload>
+    </demo-block>
+
+    <!-- #ifdef MP-WEIXIN -->
+    <demo-block title="上传视频和图片">
+      <wd-upload accept="media" multiple :file-list="fileList11" :action="action" @change="handleChange11"></wd-upload>
+    </demo-block>
+    <demo-block title="仅上传文件">
+      <wd-upload accept="file" multiple :file-list="fileList12" :action="action" @change="handleChange12"></wd-upload>
+    </demo-block>
+    <!-- #endif -->
+
+    <!-- #ifdef MP-WEIXIN || H5  -->
+    <demo-block title="上传视频图片和文件">
+      <wd-upload accept="all" multiple :file-list="fileList13" :action="action" @change="handleChange13"></wd-upload>
+    </demo-block>
+    <!-- #endif -->
   </page-wraper>
 </template>
 <script lang="ts" setup>
 import { useToast, useMessage } from '@/uni_modules/wot-design-uni'
+import type { UploadFile } from '@/uni_modules/wot-design-uni/components/wd-upload/types'
 import { ref } from 'vue'
 
-const action: string = 'https://ftf.jd.com/api/uploadImg'
-const fileList1 = ref<any[]>([
+const action: string = 'https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86eb04dc1e8fd64865cb5/upload'
+const fileList = ref<UploadFile[]>([
   {
     url: 'https://img.yzcdn.cn/vant/cat.jpeg'
   }
 ])
-const fileList2 = ref<any[]>([
+
+const fileList1 = ref<UploadFile[]>([])
+const fileList2 = ref<UploadFile[]>([
   {
     url: 'https://img12.360buyimg.com//n0/jfs/t1/29118/6/4823/55969/5c35c16bE7c262192/c9fdecec4b419355.jpg'
   }
 ])
-const fileList3 = ref([])
-const fileList4 = ref([])
-const fileList5 = ref([])
-const fileList6 = ref([])
-const fileList7 = ref([])
-const fileList8 = ref([])
-const fileList9 = ref([])
-const fileList10 = ref([])
-const fileList11 = ref([])
+const fileList3 = ref<UploadFile[]>([])
+const fileList4 = ref<UploadFile[]>([])
+const fileList5 = ref<UploadFile[]>([])
+const fileList6 = ref<UploadFile[]>([])
+const fileList7 = ref<UploadFile[]>([])
+const fileList8 = ref<UploadFile[]>([])
+const fileList9 = ref<UploadFile[]>([])
+const fileList10 = ref<UploadFile[]>([])
+const fileList11 = ref<UploadFile[]>([])
+const fileList12 = ref<UploadFile[]>([])
+const fileList13 = ref<UploadFile[]>([])
+const fileList14 = ref<UploadFile[]>([])
+const fileList15 = ref<UploadFile[]>([])
 
 const messageBox = useMessage()
 const toast = useToast()
@@ -176,7 +199,17 @@ function handleFail(event: any) {
 function handleProgess(event: any) {
   console.log('加载中', event)
 }
-function handleChange1({ fileList }: any) {
+
+function handleChange({ fileList }: any) {
+  fileList.value = fileList
+}
+
+function handleChange1({ fileList }: { fileList: UploadFile[] }) {
+  // fileList.forEach((item) => {
+  //   if (!item.thumb) {
+  //     item.thumb = 'https://unpkg.com/wot-design-uni-assets/redpanda.jpg'
+  //   }
+  // })
   fileList1.value = fileList
 }
 function handleChange2({ fileList }: any) {
@@ -209,5 +242,14 @@ function handleChange10({ fileList }: any) {
 function handleChange11({ fileList }: any) {
   fileList11.value = fileList
 }
+function handleChange12({ fileList }: any) {
+  fileList12.value = fileList
+}
+function handleChange13({ fileList }: any) {
+  fileList13.value = fileList
+}
+function handleChange14({ fileList }: any) {
+  fileList14.value = fileList
+}
 </script>
 <style lang="scss" scoped></style>

src/pages/upload/Index.vue

@@ -700,6 +700,10 @@ $-upload-evoke-disabled-color: var(--wot-upload-evoke-disabled-color, rgba(0, 0,
 $-upload-close-icon-size: var(--wot-upload-close-icon-size, 16px) !default; // 移除按钮尺寸
 $-upload-close-icon-color: var(--wot-upload-close-icon-color, rgba(0, 0, 0, 0.65)) !default; // 移除按钮颜色
 $-upload-progress-fs: var(--wot-upload-progress-fs, 14px) !default; // 进度文字字号
+$-upload-file-fs: var(--wot-upload-file-fs, 12px) !default; // 文件名字号
+$-upload-file-color: var(--wot-upload-file-color, $-color-secondary) !default; // 文件名字颜色
+
+
 $-upload-preview-name-fs: var(--wot-upload-preview-name-fs, 12px) !default; // 预览图片名字号
 $-upload-preview-icon-size: var(--wot-upload-preview-icon-size, 24px) !default; // 预览内部图标尺寸
 $-upload-preview-name-bg: var(--wot-upload-preview-name-bg, rgba(0, 0, 0, 0.6)) !default; // 预览文件名背景色

src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss

@@ -656,6 +656,28 @@ export const getPropByPath = (obj: any, path: string): any => {
  */
 export const isDate = (val: unknown): val is Date => Object.prototype.toString.call(val) === '[object Date]' && !Number.isNaN((val as Date).getTime())
 
+/**
+ * 检查提供的URL是否为视频链接。
+ * @param url 需要检查的URL字符串。
+ * @returns 返回一个布尔值，如果URL是视频链接则为true，否则为false。
+ */
+export function isVideoUrl(url: string): boolean {
+  // 使用正则表达式匹配视频文件类型的URL
+  const videoRegex = /\.(mp4|mpg|mpeg|dat|asf|avi|rm|rmvb|mov|wmv|flv|mkv|video)/i
+  return videoRegex.test(url)
+}
+
+/**
+ * 检查提供的URL是否为图片URL。
+ * @param url 待检查的URL字符串。
+ * @returns 返回一个布尔值，如果URL是图片格式，则为true；否则为false。
+ */
+export function isImageUrl(url: string): boolean {
+  // 使用正则表达式匹配图片URL
+  const imageRegex = /\.(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg|image)/i
+  return imageRegex.test(url)
+}
+
 /**
  * 判断环境是否是H5
  */

src/uni_modules/wot-design-uni/components/common/util.ts

@@ -11,6 +11,14 @@
         color: $-dark-color-gray;
       }
     }
+
+    @include e(file) {
+      background-color: $-dark-background4;
+    }
+
+    @include e(file-name) {
+      color: $-dark-color3;
+    }
   }
 
 }
@@ -70,12 +78,46 @@
     display: flex;
   }
 
-  @include e(picture) {
+  @include e(picture, file, video) {
+    position: relative;
     display: block;
     width: 100%;
     height: 100%;
   }
 
+  @include e(file, video) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: $-upload-evoke-bg;
+  }
+
+  @include e(file-name, video-name) {
+    width: 100%;
+    font-size: $-upload-file-fs;
+    color: $-upload-file-color;
+    box-sizing: border-box;
+    padding: 0 4px;
+    text-align: center;
+    margin-top: 8px;
+    @include lineEllipsis()
+  }
+
+  @include edeep(video-paly) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 24px;
+    color: $-color-white;
+
+    &::before {
+      background-color: rgba(0, 0, 0, 0.5);
+      border-radius: 50%;
+    }
+  }
+
   @include edeep(close) {
     position: absolute;
     right: calc($-upload-close-icon-size / 2 * -1);