调整上传组件,视频的展示处理

src/components/AiUploader.vue

@@ -4,17 +4,18 @@
       <div class="item" v-for="(item, i) in fileList" :key="i">
         <template v-if="type == 'image'">
           <ai-image :src="item.url" :preview="preview"/>
-          <div class="info">
+          <u-icon v-if="!disabled" class="delBtn" color="#f46" name="close-circle-fill" size="40" @click="remove(i)"/>
-            <i>{{ item.fileSizeStr }}</i>
-          </div>
         </template>
-        <template v-else>
+        <template v-else-if="type == 'video'">
+          <video :src="item.url" :poster="item.thumb"/>
+          <u-icon v-if="!disabled" class="delBtn" color="#f46" name="close-circle-fill" size="40" @click="remove(i)"/>
+        </template>
+        <div class="file" v-else>
           <ai-image :preview="preview" :file="item"/>
           <div class="info">
             <span>{{ item.name }} </span>
             <i>{{ item.fileSizeStr }}</i>
           </div>
-        </template>
           <template v-if="!disabled">
             <div btn @tap="handleReUpload(i)">
               重新上传
@@ -24,6 +25,7 @@
             </div>
           </template>
         </div>
+      </div>
       <div v-if="!disabled&&(fileList.length == 0 || (multiple && fileList.length < limit))" class="default"
            @click="upload">
         <i class="iconfont iconfont-iconAdd"/>
@@ -51,16 +53,23 @@ export default {
     fileId: String,
     mediaId: String,
     def: {default: () => []},
-    action: {default: '/app/wxcp/upload/uploadFile'},
+    action: String,
     preview: Boolean,
     size: {default: 10 * 1024 * 1024},
     disabled: Boolean,
     sourceType: {default: () => ['album', 'camera']}
   },
   computed: {
-    errorImage() {
+    ...mapState(['token']),
-      return this.$cdn + 'file.png'
+    errorImage: v => v.$cdn + 'file.png',
-    },
+    api() {
+      if (this.action) return this.action
+      else return {
+        image: '/admin/file/add',
+        file: '/admin/file/add',
+        video: '/admin/file/addVideo',
+      }[this.type]
+    }
   },
   watch: {
     def: {
@@ -74,6 +83,7 @@ export default {
         }
       },
       immediate: true,
+      deep: true
     },
   },
   data() {
@@ -99,10 +109,8 @@ export default {
             if (count > this.limit && this.limit !== 1) {
               return this.$u.toast(`不能超过${this.limit}个`)
             }
-            if (res.tempFiles) {
+            if (res.tempFiles?.length > 0) {
-              res.tempFiles?.map((item) => {
+              res.tempFiles.map(this.uploadFile)
-                this.uploadFile(item)
-              })
             } else if (res?.tempFile) {
               this.uploadFile(res.tempFile)
             }
@@ -118,7 +126,6 @@ export default {
       } else {
         this.$u.toast(`不能超过${this.limit}个`)
       }
-
     },
     uploadFile(img) {
       if (this.size > 0 && img.size > this.size) {
@@ -131,22 +138,29 @@ export default {
         this.$emit('manual', img)
         uni.hideLoading()
       } else {
-        this.$http.post(this.action, formData, {
+        this.$http.post(this.api, formData, {
           params: {type: this.type},
         }).then((res) => {
-          uni.hideLoading()
           if (res?.data) {
             this.$emit('data', res.data)
             this.$u.toast('上传成功!')
-            if (this.action == '/app/wxcp/upload/uploadFile') {
+            if (!this.action) {
+              if (this.type == 'image') {
+                const [image = "",] = res.data
+                this.fileList.push({url: image.split(";")[0], id: image.split(";")?.[1]})
+              } else if (this.type == 'video') {
+                const [video = "", thumb = ""] = res.data
+                this.fileList.push({url: video.split(";")[0], id: video.split(";")?.[1], thumb: thumb.split(";")[0]})
+              }
+            } else if (this.api == '/app/wxcp/upload/uploadFile') {
               this.$emit('update:mediaId', res.data?.media?.mediaId)
               this.$emit('update:fileId', res.data.file.id)
               this.fileList.push(res.data.file)
-            } else if (this.action == '/admin/file/add2') {
+            } else if (this.api == '/admin/file/add2') {
               let info = res.data
               this.$emit('update:fileId', info?.id)
               this.fileList.push(res.data)
-            } else if (this.action == '/admin/file/add-portrait') {
+            } else if (this.api == '/admin/file/add-portrait') {
               this.fileList.push({url: res.data?.split(";")?.[0], id: res.data?.split(";")?.[1]})
             }
             this.$emit("update:def", this.fileList)
@@ -156,8 +170,7 @@ export default {
           }
         }).catch(err => {
           this.$u.toast(err)
-          uni.hideLoading()
+        }).finally(() => uni.hideLoading())
-        })
       }
 
     },
@@ -174,15 +187,29 @@ export default {
   line-height: normal;
   margin-bottom: 16px;
 
-  .fileList {
+  ::v-deep.fileList {
-    .item {
     display: flex;
-      align-items: center;
+    flex-wrap: wrap;
-      margin-bottom: 10px;
 
-      image {
+    .item {
-        width: 160px;
+      width: initial;
-        height: 160px;
+      padding: 0 10px 10px 0;
+      position: relative;
+
+      .delBtn {
+        position: absolute;
+        right: -8px;
+        top: -8px;
+        z-index: 2;
+        border-radius: 50%;
+        overflow: hidden;
+        background-color: #fff;
+        height: 40px;
+      }
+
+      image, video {
+        width: 29vw;
+        height: 29vw;
       }
 
       i {
@@ -219,8 +246,8 @@ export default {
     }
 
     .default {
-      width: 240px;
+      width: 30vw;
-      height: 240px;
+      height: 30vw;
       box-sizing: border-box;
       border-radius: 8px;
       background: #f3f4f7;
@@ -240,6 +267,12 @@ export default {
         font-size: 28px;
       }
     }
+
+    .file {
+      width: 100vw;
+      display: flex;
+      align-items: center;
+    }
   }
 }
 </style>