上传预览

src/views/book/courseware/create/components/base/common/UploadFile.vue

@@ -12,6 +12,7 @@
           :show-file-list="false"
           :auto-upload="false"
           :on-change="onFileChange"
+          :limit="limit"
         >
           <el-button>选取{{ labelText }}文件</el-button>
         </el-upload>
@@ -20,7 +21,7 @@
     </div>
     <el-divider />
     <div class="upload-tip">{{ uploadTip }}</div>
-    <ul slot="file-list" class="file-list">
+    <ul slot="file-list" class="file-list" v-if="fileList.length > 0">
       <li v-for="(file, i) in fileList" :key="i">
         <div class="file-name">
           <span>
@@ -111,6 +112,10 @@ export default {
       type: Number,
       default: 1024,
     },
+    limit: {
+      type: Number,
+      default: null,
+    },
   },
   data() {
     return {

src/views/book/courseware/create/components/base/upload_preview/UploadPreview.vue

@@ -14,6 +14,7 @@
         :accept-file-type="acceptFileType"
         :upload-tip="uploadTip"
         :icon-class="iconClass"
+        :limit="1"
         @updateFileList="updateFileList"
       />
       <el-form :model="data" label-width="72px" label-position="left">
@@ -49,6 +50,14 @@ export default {
       iconClass: 'picture',
     };
   },
+  watch: {
+    'data.file_list': {
+      handler(val) {
+        console.log(val);
+      },
+      immediate: true,
+    },
+  },
   methods: {
     updateFileList({ file_list, file_id_list, file_info_list }) {
       this.data.file_list = file_list;
@@ -58,3 +67,8 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+:deep .file-list {
+  margin-bottom: 16px;
+}
+</style>

src/views/book/courseware/preview/components/upload_preview/UploadPreviewPreview.vue

@@ -11,27 +11,25 @@
 
 <script>
 import UploadFile from './components/UploadView.vue';
+import { getUploadPreviewData } from '@/views/book/courseware/data/uploadPreview';
 
 export default {
   name: 'UploadControlPreview',
   components: { UploadFile },
   data() {
     return {
-      labelText: '文件',
-      acceptFileType: '.png,.jpg,.pdf',
-      uploadTip:
-        'The size of the uploaded image should not exceed 2MB, the size of the uploaded audio file, pdf file, and excel file should not exceed 20MB, and the size of the uploaded audio file should not exceed 20MB',
-      iconClass: 'picture',
-      fileList: [],
-      type: 'upload_control',
+      data: getUploadPreviewData(),
     };
   },
-  methods: {
-    updateFileList({ file_list, file_id_list, file_info_list }) {
-      this.data.file_list = file_list;
-      this.data.file_id_list = file_id_list;
-      this.data.file_info_list = file_info_list;
+  watch: {
+    'data.file_list': {
+      handler(val) {
+        console.log(val);
+      },
+      immediate: true,
     },
   },
+  created() {},
+  methods: {},
 };
 </script>