测试图片预览

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

@@ -32,7 +32,7 @@
 			imgUrlShow: {
 				handler(newval, oldval) {
 					if (oldval) {
-						URL.revokeObjectURL(oldval);
+						// URL.revokeObjectURL(oldval);
 					}
 				},
 				immediate: true,
@@ -43,12 +43,12 @@
 			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;
-					// }
+					// this.imgUrlShow = URL.createObjectURL(res);
+					const reader = new FileReader();
+					reader.readAsDataURL(res)
+					reader.onloadend = () => {
+						this.imgUrlShow = reader.result;
+					}
 				});
 			},
 		},
@@ -59,7 +59,7 @@
 			this.watching = true
 		},
 		beforeDestroy() {
-			URL.revokeObjectURL(this.imgUrlShow);
+			// URL.revokeObjectURL(this.imgUrlShow);
 		},
 	}
 </script>

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

@@ -0,0 +1,69 @@
+<template>
+	<video :src="imgUrlShow" controls></video>
+	<!-- <image class="img" src="@/static/images/test/1.png"></image> -->
+</template>
+
+<script>
+	import {previewFile} from'@/api/common.js'
+	export default {
+		name:"image-preview",
+		props:{
+			imgId:{
+				default:'',
+				type:String
+			}
+		},
+		data() {
+			return {
+				imgUrlShow:'',
+				watching:false
+			};
+		},
+		watch: {
+			imgId: {
+				handler(newval, oldval) {
+					if (newval && this.watching) {
+						this.getPreviewUrlBlob(newval);
+					}
+				},
+				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;
+					// }
+				});
+			},
+		},
+		mounted() {
+			if (this.imgId) {
+				this.getPreviewUrlBlob(this.imgId);
+			}
+			this.watching = true
+		},
+		beforeDestroy() {
+			URL.revokeObjectURL(this.imgUrlShow);
+		},
+	}
+</script>
+
+<style>
+
+</style>