预览

src/components/ImgPreview/ImgPreview.vue

@@ -1,11 +1,39 @@
 <template>
-  <div class="demo-image__preview">
+  <!-- 图片预览 -->
+  <div class="demo-image__preview" v-if="copyFileType === '.png'">
     <el-image-viewer
       v-if="showImageViewer"
       :url-list="[previewData]"
       @close="closeImgPreview"
     />
   </div>
+  <!-- 视频预览 -->
+  <el-dialog
+    v-model="showImageViewer"
+    width="40%"
+    top="40vh"
+    draggable
+    title="预览"
+    v-if="copyFileType === '.mp4'"
+    :before-close="closeImgPreview"
+  >
+    <video
+      :src="previewData"
+      controls
+      :style="{ width: '100%', height: '100%' }"
+    ></video>
+  </el-dialog>
+  <!-- 音频预览 -->
+  <el-dialog
+    v-model="showImageViewer"
+    width="40%"
+    title="预览"
+    draggable
+    v-if="copyFileType === '.mp3'"
+    :before-close="closeImgPreview"
+  >
+    <audio :src="previewData" controls></audio>
+  </el-dialog>
 </template>
 
 <script setup>
@@ -24,8 +52,12 @@ const props = defineProps({
     default: false,
   },
   previewData: {
-    type: Object,
-    default: () => {},
+    type: String,
+    default: "",
+  },
+  copyFileType: {
+    type: String,
+    default: "",
   },
 });
 watch(
@@ -33,19 +65,13 @@ watch(
   (newValue) => {
     // console.log(111);
     showImageViewer.value = newValue;
+  },
+  () => props.previewData,
+  (newValue) => {
+    console.log("previewData", newValue);
+    // showImageViewer.value = newValue;
   }
 );
-const url =
-  "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg";
-const srcList = [
-  "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
-  "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
-  "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
-  "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
-  "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
-  "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
-  "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",
-];
 const previewImg = ref(null);
 const showImageViewer = ref(false); //组件是否显示
 const emit = defineEmits(["closeImgPreview"]);
@@ -71,4 +97,14 @@ const closeImgPreview = () => {
   width: 100%;
   height: 200px;
 }
+.video_box {
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #fff;
+  z-index: 10000;
+  /* top: 20%;
+  left: 40%; */
+}
 </style>

src/views/myfile/MyFile.vue

@@ -420,7 +420,7 @@
                     </template>
                 </el-dialog>
             </div>
-    <ImgPreview  :previewData="previewData" :showPreview="showPreview" @closeImgPreview="closeImgPreview"></ImgPreview>
+          <ImgPreview  :previewData="previewData" :copyFileType="copyFileType" :showPreview="showPreview" @closeImgPreview="closeImgPreview"></ImgPreview>
         </div>
     </div>
     <!-- 图片预览 -->
@@ -598,6 +598,10 @@ export default {
                 name: "历史版本"
             },
             {
+                img: ImgFile.previewIcon,
+                name: "预览"
+            },
+            {
                 img: ImgFile.share,
                 name: "删除"
             }
@@ -829,13 +833,14 @@ export default {
                 editOnline.value = false
                 cliCC.value = false
             }
-            if (row.name === '历史版本') {
-                console.log('row=', toRaw(row));
-                console.log('copyFileId',copyFileId.value);//文件id
+            if (row.name === '预览') {
+                // console.log('row=', toRaw(row));
+                // console.log('copyFileId',copyFileId.value);//文件id
+                // console.log('copyFileType',copyFileType.value);//文件type
                 showPreview.value = true
                 const res = await preview(copyFileId.value)
                 previewData.value = URL.createObjectURL(res)
-                console.log('res',res);
+                // console.log('res',res);
             }
         }
         function chooseSet1() {
@@ -1272,7 +1277,6 @@ export default {
             spaceSelect,
             newDirId,
             newSpaceId,
-            getAllFolder,
             showPreview,//控制图片预览
             closeImgPreview,//关闭预览事件
             previewData,//预览文件数据

src/views/myfile/jsComponents/ImgFile.js

@@ -29,6 +29,7 @@ import xlxs from '../../../assets/images/xlxs.png'
 import collect from '../../../assets/images/collect.png'
 import downLoad from '../../../assets/images/download.png'
 import yellowStar from '../../../assets/images/yellowstar.png'
+import previewIcon from '../../../assets/images/outline_preview.png'
 export default {
     copy,
     clipboard,
@@ -60,4 +61,5 @@ export default {
     xlxs,
     collect,
     downLoad,
+    previewIcon
 }