feat: ✨ upload组件增加mode属性传递给预览image

✅ Closes: #203
Moonofweisheng · Apr 5, 2024 · acf3f99 · acf3f99
1 parent 1398982
commit acf3f99
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 8 deletions.
diff --git a/docs/component/upload.md b/docs/component/upload.md
@@ -13,7 +13,7 @@
 `action` 设置图片上传的地址；
 
 ```html
-<wd-upload :file-list="fileList" :action="action" @change="handleChange"></wd-upload>
+<wd-upload :file-list="fileList1" image-mode="aspectFill" :action="action" @change="handleChange1"></wd-upload>
 ```
 
 ```typescript
@@ -214,7 +214,7 @@ function handleChange({ files }) {
 - `formData` 待处理的`formData`
 - `resolve` 函数，用于告知组件是否组装`formData`成功，`resolve(formData)` 表示组装成功。
 
- 
+
 
 ```html
 <wd-upload :file-list="files" :action="host" :build-form-data="buildFormData" @change="handleChange"></wd-upload>
@@ -290,8 +290,8 @@ const buildFormData = ({ file, formData, resolve }) => {
   const key = `20231120/${imageName}` // 图片上传到oss的路径(拼接你的文件夹和文件名)
   const qAk = 'your qAk'
   const qSignAlgorithm = 'your qSignAlgorithm'
-  const qKeyTime = 'your qKeyTime'  
-  const qSignature = 'your qSignature'  
+  const qKeyTime = 'your qKeyTime'
+  const qSignature = 'your qSignature'
   const success_action_status = '200' // 将上传成功状态码设置为200
   formData = {
     ...formData,
@@ -395,6 +395,7 @@ const fileList = ref<any[]>([
 | loading-size     | [加载中图标尺寸](/component/loading)                                                                                                                                           | string                                | -      | 24px                       | -        |
 | use-default-slot | 开启默认唤起项插槽                                                                                                                                                             | boolean                               | -      | false                      | -        |
 | status-key       | file 数据结构中，status 对应的 key                                                                                                                                             | string                                | -      | status                     | -        |
+| image-mode       | 预览图片的mode属性                                                                                                                                             | ImageMode                                | -      | aspectFit                     | -        |
 
 ## file 数据结构
 

diff --git a/src/pages/upload/Index.vue b/src/pages/upload/Index.vue
@@ -6,7 +6,7 @@
     <wd-message-box></wd-message-box>
     <wd-toast id="wd-toast"></wd-toast>
     <demo-block title="基本用法">
-      <wd-upload :file-list="fileList1" :action="action" @change="handleChange1"></wd-upload>
+      <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>
@@ -57,7 +57,7 @@ import { ref } from 'vue'
 const action: string = 'https://ftf.jd.com/api/uploadImg'
 const fileList1 = ref<any[]>([
   {
-    url: 'https://img12.360buyimg.com//n0/jfs/t1/29118/6/4823/55969/5c35c16bE7c262192/c9fdecec4b419355.jpg'
+    url: 'https://img.yzcdn.cn/vant/cat.jpeg'
   }
 ])
 const fileList2 = ref<any[]>([

diff --git a/src/uni_modules/wot-design-uni/components/wd-upload/types.ts b/src/uni_modules/wot-design-uni/components/wd-upload/types.ts
@@ -1,6 +1,7 @@
 import type { ExtractPropTypes, PropType } from 'vue'
 import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
 import type { LoadingType } from '../wd-loading/types'
+import type { ImageMode } from '../wd-img/types'
 
 export interface ChooseFileOption {
   multiple: boolean
@@ -217,7 +218,11 @@ export const uploadProps = {
    */
   loadingSize: makeStringProp('24px'),
   customEvokeClass: makeStringProp(''),
-  customPreviewClass: makeStringProp('')
+  customPreviewClass: makeStringProp(''),
+  /**
+   * 预览图片的mode属性
+   */
+  imageMode: makeStringProp<ImageMode>('aspectFit')
 }
 
 export type UploadProps = ExtractPropTypes<typeof uploadProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue b/src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue
@@ -4,7 +4,7 @@
     <view :class="['wd-upload__preview', customPreviewClass]" v-for="(file, index) in uploadFiles" :key="index">
       <!-- 成功时展示图片 -->
       <view class="wd-upload__status-content">
-        <image :src="file.url" mode="aspectFit" class="wd-upload__picture" @click="onPreviewImage(index)" />
+        <image :src="file.url" :mode="imageMode" class="wd-upload__picture" @click="onPreviewImage(index)" />
       </view>
 
       <view v-if="file.status !== 'success'" class="wd-upload__mask wd-upload__status-content">