From 3b7181ccc8f3e9c233de96fc1221d8ffe73ac001 Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期五, 17 五月 2024 10:10:28 +0800
Subject: [PATCH] 张先强改文件

---
 src/components/UploadC.vue |   42 ++++++++++++++++++++++++++++++++++++++----
 1 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/components/UploadC.vue b/src/components/UploadC.vue
index 5367c15..951adc9 100644
--- a/src/components/UploadC.vue
+++ b/src/components/UploadC.vue
@@ -4,13 +4,19 @@
         :action="uploadUrl"
         :show-file-list="true"
         :limit="uploadNum"
+        :accept="acceptList"
         multiple
+        :file-list="fileUrl"
         :on-remove="handleRemove"
         :before-remove="beforeRemove"
         :on-success="handleUploadSuccess"
         :before-upload="beforeUpload">
       <el-button size="small" type="primary">鐐瑰嚮涓婁紶</el-button>
       <div slot="tip" class="el-upload__tip">鍙兘涓婁紶pdf銆乵p4銆乵p3銆乸ng銆乯pg銆乯pge鏂囦欢锛屼笖涓嶈秴杩噞{fileSizeLimitM}}M</div>
+      <div v-if="fileUrl && fileUrl.length > 0 && uploadNum === 1">
+        <video controls class="returnShow" v-if="fileType === 'video'" :src="'/api/files/' + fileUrl[0].url"></video>
+        <img class="returnShow" v-if="fileType === 'img'" :src="'/api/files/' + fileUrl[0].url"/>
+      </div>
     </el-upload>
   </div>
 </template>
@@ -24,41 +30,69 @@
       default: 1,
       type: Number
     },
+    fileType: {
+      required: false,
+      type: String
+    },
     fileSizeLimitM: {
       required: false,
       default: 1,
       type: Number
+    },
+    fileUrl: {
+      type: Array,
+      required: true,
+      default: () => []
     }
   },
   data() {
     return {
       uploadUrl: "http://localhost:8085/api/upload/upload",
-      fileUrl: "",
     }
   },
   methods: {
+    clearFile() {
+      this.fileUrl = []
+    },
     beforeRemove(file, fileList) {
       return this.$confirm(`纭畾绉婚櫎 ${ file.name }锛焋);
     },
     handleRemove(file, fileList) {
-      console.log(file, fileList);
+      this.$emit('removeFile', this.fileUrl, file.name);
     },
     handleUploadSuccess(res, file) {
-      this.$emit('getUploadUrl', file.response);
+      this.fileUrl.push(res.response)
+      this.$emit('getUploadUrl', this.fileUrl);
     },
     beforeUpload(file) {
-      const limit = file.size / 1024 / 1024 < this.fileSizeLimitM;
 
+      const limit = file.size / 1024 / 1024 < this.fileSizeLimitM;
       if (!limit) {
         this.$message.error(`涓婁紶鏂囦欢澶у皬涓嶈兘瓒呰繃 ${this.fileSizeLimitM}MB!`);
       }
       return limit;
     },
+  },
+  computed: {
+    acceptList: () => {
+      let temp = '.jgp,.png,.jpeg'
+      if(this.fileType === 'video') {
+        temp = '.mp4,.avi'
+      }
+      if(this.fileType === 'pdf') {
+        temp = '.pdf'
+      }
+      return temp;
+    }
   }
 }
 </script>
 
 <style scoped>
+.returnShow {
+  width: 300px;
+  height: 200px;
+}
 .avatar-uploader {
   text-align: center;
   width: 100%

--
Gitblit v1.8.0