课程学习页面绘制

src/components/image-preview/image-preview.vue

@@ -48,8 +48,10 @@
 						this.imgUrlShow = res;
 					});
 				}else{
-					previewFile(id).then((res) => {
-						this.imgUrlShow = res;
+					previewFile(id).then((result) => {
+						let _header = result.header['content-type'].split(';')[0]
+						let base64 = `data:${_header};base64,` + uni.arrayBufferToBase64(result.data)
+						this.imgUrlShow = base64;
 					});
 				}
 			},

src/components/image-preview/video-preview.vue

@@ -1,12 +1,13 @@
 <template>
-	<video :src="imgUrlShow" controls></video>
-	<!-- <image class="img" src="@/static/images/test/1.png"></image> -->
+	<view class="video-view-box">
+		<video class="video-cont" v-if="imgUrlShow" :src="imgUrlShow" controls></video>
+	</view>
 </template>
 
 <script>
-	import {previewFile} from'@/api/common.js'
+	import { downloadFile } from'@/api/common.js'
 	export default {
-		name:"image-preview",
+		name:"video-preview",
 		props:{
 			imgId:{
 				default:'',
@@ -28,28 +29,13 @@
 				},
 				immediate: true,
 				deep: true,
-			},
-			imgUrlShow: {
-				handler(newval, oldval) {
-					if (oldval) {
-						URL.revokeObjectURL(oldval);
-					}
-				},
-				immediate: true,
-				deep: true,
 			}
 		},
 		methods: {
 			getPreviewUrlBlob(id) {
-				// this.imgUrlShow = '@/static/images/index/message_b.png'
-				previewFile(id).then((res) => {
-					this.imgUrlShow = URL.createObjectURL(res);
-					// const reader = new FileReader();
-					// reader.readAsDataURL(res)
-					// reader.onloadend = () => {
-					// 	this.imgUrlShow = reader.result;
-					// }
-				});
+				downloadFile(id).then(res=>{
+					this.imgUrlShow = res.tempFilePath
+				})
 			},
 		},
 		mounted() {
@@ -58,12 +44,17 @@
 			}
 			this.watching = true
 		},
-		beforeDestroy() {
-			URL.revokeObjectURL(this.imgUrlShow);
-		},
 	}
 </script>
 
 <style>
-
+	.video-view-box{
+		width: 100%;
+		height: 100%;
+		background-color: #eee;
+	}
+	.video-view-box .video-cont{
+		width: 100%;
+		height: 100%;
+	}
 </style>