上传预览的预览

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

@@ -17,7 +17,7 @@
         :limit="1"
         @updateFileList="updateFileList"
       />
-      <el-form :model="data" label-width="72px" label-position="left">
+      <!-- <el-form :model="data" label-width="72px" label-position="left">
         <el-form-item label="下载">
           <el-radio-group v-model="data.is_enable_download">
             <el-radio v-for="{ value, label } in switchOption" :key="value" :label="value">
@@ -25,7 +25,7 @@
             </el-radio>
           </el-radio-group>
         </el-form-item>
-      </el-form>
+      </el-form> -->
     </template>
   </ModuleBase>
 </template>
@@ -67,8 +67,3 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-:deep .file-list {
-  margin-bottom: 16px;
-}
-</style>

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

@@ -3,14 +3,26 @@
     <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
 
     <div class="main">
-      <div>预览开发中</div>
-      <!-- <UploadFile
-    :changeFillId="courseware_id"
-    :accept="acceptFileType"
-    :filleNumber="1"
-    :fileList="fileList"
-    :type="type"
-  /> -->
+      <template v-if="data.file_list.length > 0">
+        <template
+          v-if="
+            data.file_list[0].file_name.indexOf('png') !== -1 ||
+            data.file_list[0].file_name.indexOf('jpg') !== -1 ||
+            data.file_list[0].file_name.indexOf('jpeg') !== -1
+          "
+        >
+          <el-image
+            style="width: 100%; height: 260px"
+            :src="data.file_list[0].file_url"
+            :fit="'contain'"
+            :preview-src-list="[data.file_list[0].file_url]"
+          >
+          </el-image>
+        </template>
+        <template v-else-if="data.file_list[0].file_name.indexOf('pdf') !== -1">
+          <iframe :src="data.file_list[0].newpath" id="ifm" width="100%" height="260px" frameborder="0"></iframe>
+        </template>
+      </template>
     </div>
   </div>
 </template>
@@ -18,6 +30,9 @@
 <script>
 import UploadFile from './components/UploadView.vue';
 import PreviewMixin from '../common/PreviewMixin';
+import { getConfig } from '@/utils/auth';
+import { GetFileURLMap } from '@/api/app';
+const Base64 = require('js-base64').Base64;
 
 import { getUploadPreviewData } from '@/views/book/courseware/data/uploadPreview';
 
@@ -28,18 +43,34 @@ export default {
   data() {
     return {
       data: getUploadPreviewData(),
+      file_preview_url: getConfig() ? getConfig().doc_preview_service_address : '',
     };
   },
   watch: {
     'data.file_list': {
       handler(val) {
-        console.log(val);
+        if (val.length > 0) {
+          this.handleData();
+        }
       },
       immediate: true,
     },
   },
   created() {},
-  methods: {},
+  methods: {
+    // 处理数据
+    handleData() {
+      this.data.file_list.forEach((item) => {
+        GetFileURLMap({ file_id_list: [item.file_id] }).then(({ url_map }) => {
+          this.$set(
+            item,
+            'newpath',
+            `${this.file_preview_url}/onlinePreview?url=` + Base64.encode(url_map[item.file_id]),
+          );
+        });
+      });
+    },
+  },
 };
 </script>