文件上传组件

doc/h5/src/components/UploadFile.vue → doc/h5/src/components/UploadSingleFile.vue

 <template>
-  <div>
-    <div>
-      
-    </div>
-    <el-upload class="upload-demo" :multiple="multiple" :show-file-list="false" :limit="limit" :accept="accept"
-      :style="{
-        'border': borderColor ? `1px dashed ${borderColor}` : 'none',
+  <div class="upload-demo" :style="{
+    'border': `1px dashed ${borderColor}`,
     'background-color': `${backgroundColor}`
-      }" drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15">
+  }">
+    <div class="h-200 flex-center flex-col" v-if="fileList.length > 0">
+      <div class="flex-align-center rounded-6 px-10 py-6 file">
+        <el-icon size="36" color="#3461f3"><Document /></el-icon>
+        <div class="ml-4">
+          <div>文件名文件名文件名</div>
+          <div class="text-999 fs-12 mt-6">pdf</div>
+        </div>
+      </div>
+      <el-button class="mt-20" round :icon="Upload" @click="fileList=[]">重新上传</el-button>
+    </div>
+    <el-upload v-else :show-file-list="false" :accept="accept" drag
+      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15">
       <slot />
     </el-upload>
   </div>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
+import { Document, Upload } from '@element-plus/icons-vue'
 
+const emit = defineEmits(['changeFiles'])
 const props = defineProps({
   borderColor: {
     type: String,
@@ -24,24 +33,18 @@ const props = defineProps({
     type: String,
     default: '#fff'
   },
-  multiple: {
-    type: Boolean,
-    default: false
-  },
   showFileList: {
     type: Boolean,
     default: false
   },
-  limit: {
-    type: Number,
-    default: 1
-  },
   accept: {
     type: String,
     default: 'img'
   }
 })
 
+const fileList = ref([])
+
 </script>
 <style scoped lang="scss">
 .upload-demo {
@@ -49,7 +52,7 @@ const props = defineProps({
   transition: all 0.2s;
 
   &:hover {
-    border-color: #5337C7;
+    border-color: #5337C7 !important;
   }
 
   :deep(.el-upload-dragger) {
@@ -60,5 +63,9 @@ const props = defineProps({
   .el-upload__text {
     color: #00000063;
   }
+  .file {
+    border: 1px solid #eee;
+    background-color: #f9f9f9;
+  }
 }
 </style>
\ No newline at end of file

doc/h5/src/components/UploadSingleImg.vue

+<template>
+  <div class="upload-demo" :style="{
+    'border': `1px dashed ${borderColor}`,
+    'background-color': `${backgroundColor}`
+  }">
+    <div class="flex-center flex-col relative" style="height: 270px;" v-if="fileList.length == 0">
+      <div class="h-b100 overflow-hidden">
+        <img src="https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png"
+            class="w-b100 h-b100 object-cover" />
+      </div>
+      <div class="absolute bottom-0 left-0 top-0 w-b100 flex-center rounded-14 bg-099">
+        <el-button class="mt-20" round :icon="Upload" @click="fileList=[]">重新上传</el-button>
+      </div>
+    </div>
+    <el-upload v-else :show-file-list="false" :accept="accept" drag
+      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15">
+      <slot />
+    </el-upload>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Upload } from '@element-plus/icons-vue'
+
+
+const emit = defineEmits(['changeFiles'])
+const props = defineProps({
+  borderColor: {
+    type: String,
+    default: '#ddd'
+  },
+  backgroundColor: {
+    type: String,
+    default: '#fff'
+  },
+  showFileList: {
+    type: Boolean,
+    default: false
+  },
+  accept: {
+    type: String,
+    default: 'img'
+  }
+})
+
+const fileList = ref([])
+
+</script>
+<style scoped lang="scss">
+.upload-demo {
+  border-radius: 16px;
+  transition: all 0.2s;
+
+  :deep(.el-upload) {
+    border: 2px dashed #ddd;
+    width: 100%;
+    height: 240px;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.3s;
+
+    &:hover {
+      border-color: #c5c5c5;
+    }
+  }
+  
+  :deep(.el-upload-dragger) {
+    background-color: transparent;
+    border: none;
+  }
+
+  .el-upload__text {
+    color: #00000063;
+  }
+  .bg-099 {
+    background-color: #00000020;
+  }
+}
+</style>
\ No newline at end of file

doc/h5/src/views/Home.vue

@@ -27,19 +27,12 @@
     <div class="flex-center fs-40 pt-82">翻开剧本，创作<span class="c-5337C7">精品短剧</span></div>
 
     <section class="card mt-44 bg-fff rounded-20 p-12">
-      <!-- <el-upload class="upload-demo" drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
-        :on-change="handleChange" :show-file-list="false" accept=".doc,.docx,.pdf,.txt,.md">
+      <UploadSingleFile backgroundColor="#F8F9FC" accept=".doc,.docx,.pdf,.txt,.md" @changeFiles="changeFiles">
         <img src="@/static/imgs/fileupload.png" class="w-120" alt="">
         <div class="el-upload__text mt-24">
           点击或拖拽剧本文件到这里，支持 doc、docx、txt、pdf、md，大小不超过 20M;也可以先跳过，下一页手动输入刷本
         </div>
-      </el-upload> -->
-      <UploadFile backgroundColor="#F8F9FC" accept=".doc,.docx,.pdf,.txt,.md">
-        <img src="@/static/imgs/fileupload.png" class="w-120" alt="">
-        <div class="el-upload__text mt-24">
-          点击或拖拽剧本文件到这里，支持 doc、docx、txt、pdf、md，大小不超过 20M;也可以先跳过，下一页手动输入刷本
-        </div>
-      </UploadFile>
+      </UploadSingleFile>
 
       <section class="mt-12">
         <el-dropdown>
@@ -164,7 +157,7 @@ import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { ElMessage } from 'element-plus'
 import { ArrowDownBold, SwitchFilled } from '@element-plus/icons-vue'
-import UploadFile from '@/components/UploadFile.vue'
+import UploadSingleFile from '@/components/UploadSingleFile.vue'
 
 
 const router = useRouter();
@@ -184,6 +177,10 @@ const handleChange = (uploadFile: any, uploadFiles: any) => {
   console.log(11, uploadFile, uploadFiles)
 }
 
+const changeFiles = (file: any) => {
+  
+}
+
 </script>
 
 <style scoped lang="scss">
@@ -197,26 +194,6 @@ const handleChange = (uploadFile: any, uploadFiles: any) => {
 
 .card {
   width: 800px;
-
-  .upload-demo {
-    background-color: #F8F9FC;
-    border: 1px dashed #ddd;
-    border-radius: 16px;
-    transition: all 0.2s;
-
-    &:hover {
-      border-color: #5337C7;
-    }
-
-    :deep(.el-upload-dragger) {
-      background-color: transparent;
-      border: none;
-    }
-
-    .el-upload__text {
-      color: #00000063;
-    }
-  }
 }
 
 .btnjb {

doc/h5/src/views/project/components/LocalUploadModal.vue

@@ -14,10 +14,8 @@
         <el-button type="primary" @click="close">确定</el-button>
       </div>
     </template>
-    <el-upload class="avatar-uploader mt-20" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
-      :show-file-list="false">
-      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
-      <div v-else class="flex-center flex-col line-h24 fs-12">
+    <UploadSingleImg @changeFiles="changeFiles">
+      <div class="flex-center flex-col line-h24 fs-12">
         <el-icon size="20">
           <Plus />
         </el-icon>
@@ -25,7 +23,7 @@
         <span>仅支持 JPG, PNG 格式</span>
         <span>最大文件限制在 20MB 内</span>
       </div>
-    </el-upload>
+    </UploadSingleImg>
     <div class="text-center mt-20 mb-40">支持 JPG、PNG 格式，单个文件不超过 20MB</div>
   </el-dialog>
 </template>
@@ -34,6 +32,7 @@
 import { ref } from 'vue'
 import { Plus } from '@element-plus/icons-vue'
 import IconType from './IconType.vue';
+import UploadSingleImg from '@/components/UploadSingleImg.vue';
 
 const props = defineProps({
   title: {
@@ -53,6 +52,10 @@ const close = () => {
   visible.value = false
 }
 defineExpose({ open })
+
+const changeFiles = (val: any) => {
+  
+}
 </script>
 <style lang="scss" scoped>
 .cirir {