From 68b8ed3b4b7ddbb5fe113c1d7df3aa909dc66fb6 Mon Sep 17 00:00:00 2001
From: 龚焕茏 <2842157468@qq.com>
Date: 星期三, 03 七月 2024 18:37:29 +0800
Subject: [PATCH] feat：新增随机时间题目配置

---
 src/components/UploadC.vue |   71 +++++++++++++++++++++++++----------
 1 files changed, 51 insertions(+), 20 deletions(-)

diff --git a/src/components/UploadC.vue b/src/components/UploadC.vue
index 4a1e0c7..173c70b 100644
--- a/src/components/UploadC.vue
+++ b/src/components/UploadC.vue
@@ -1,26 +1,20 @@
 <template>
   <div>
-    <el-upload
-        :action="uploadUrl"
-        :show-file-list="true"
-        :limit="uploadNum"
-        multiple
-        :file-list="fileUrl"
-        :on-remove="handleRemove"
-        :before-remove="beforeRemove"
-        :on-success="handleUploadSuccess"
-        :before-upload="beforeUpload">
+    <el-upload :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 slot="tip" class="el-upload__tip">鍙兘涓婁紶pdf銆乵p4銆乤vi銆乸ng銆乯pg銆乯pge鏂囦欢锛屼笖涓嶈秴杩噞{ fileSizeLimitM }}M</div>
       <div v-if="fileUrl && fileUrl.length > 0 && uploadNum === 1">
-        <video 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"/>
+        <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>
 
 <script>
+
 export default {
   name: "UploadC",
   props: {
@@ -46,32 +40,65 @@
   },
   data() {
     return {
-      uploadUrl: "http://localhost:8085/api/upload/upload",
-    }
+      uploadUrl: "/api/upload/upload",
+      fileTypeList: {
+        'video': ['mp4', 'avi'],
+        'img': ['jpg', 'png', 'jpeg'],
+        'pdf': ['pdf'],
+        'file': ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'png', 'jpg', 'jpeg', 'pdf'],
+      }
+    };
   },
   methods: {
     clearFile() {
-      this.fileUrl = []
+      this.fileUrl = [];
     },
     beforeRemove(file, fileList) {
-      return this.$confirm(`纭畾绉婚櫎 ${ file.name }锛焋);
+      if (file && file.status === "success") {
+        return this.$confirm(`纭畾绉婚櫎 ${file.name}锛焋);
+      }
     },
     handleRemove(file, fileList) {
       this.$emit('removeFile', this.fileUrl, file.name);
     },
     handleUploadSuccess(res, file) {
-      this.fileUrl.push(res.response)
+      this.fileUrl.push(res.response);
       this.$emit('getUploadUrl', this.fileUrl);
     },
     beforeUpload(file) {
+      const { type } = file;
+      const typeList = this.fileTypeList[this.fileType];
+      let limitType = true;
+      if (typeList) {
+        const tempType = typeList.find(item => {
+          if (type.includes(item)) {
+            return true;
+          } else {
+            return false;
+          }
+        });
+        if (!tempType) {
+          this.$message.error(`璇蜂笂浼犳纭殑鏂囦欢鏍煎紡锛乣);
+          limitType = false;
+        }
+      }
       const limit = file.size / 1024 / 1024 < this.fileSizeLimitM;
       if (!limit) {
         this.$message.error(`涓婁紶鏂囦欢澶у皬涓嶈兘瓒呰繃 ${this.fileSizeLimitM}MB!`);
       }
-      return limit;
+      return limitType && limit;
     },
   },
-}
+  computed: {
+    acceptList() {
+      let temp = '.*';
+      if (this.fileTypeList[this.fileType]) {
+        temp = this.fileTypeList[this.fileType].map(item => '.' + item).join(',');
+      }
+      return temp;
+    }
+  }
+};
 </script>
 
 <style scoped>
@@ -79,13 +106,16 @@
   width: 300px;
   height: 200px;
 }
+
 .avatar-uploader {
   text-align: center;
   width: 100%
 }
+
 .avatar-uploader-icon:hover {
   border-color: #409EFF;
 }
+
 .avatar-uploader-icon {
   font-size: 28px;
   color: #8c939d;
@@ -95,6 +125,7 @@
   cursor: pointer;
 
 }
+
 .avatar {
   display: block;
 }

--
Gitblit v1.8.0