57 lines
1.4 KiB
Vue
57 lines
1.4 KiB
Vue
<template>
|
|
<div class="preview-container">
|
|
<!-- 图片预览 -->
|
|
<div v-if="fileType === 'image' && filePath" class="preview-item">
|
|
<a-image :width="200" :src="getFullPath(filePath)" />
|
|
</div>
|
|
|
|
<!-- 视频预览 -->
|
|
<div v-if="fileType === 'video' && filePath" class="preview-item">
|
|
<video controls :src="getFullPath(filePath)" style="width: 200px; height: auto;"></video>
|
|
</div>
|
|
|
|
<!-- 音频预览 -->
|
|
<div v-if="fileType === 'audio' && filePath" class="preview-item">
|
|
<audio controls :src="getFullPath(filePath)"></audio>
|
|
</div>
|
|
|
|
<!-- 文档预览 -->
|
|
<div v-if="fileType === 'document' && filePath" class="preview-item">
|
|
<a-button @click="handlePreviewDocument">预览文档</a-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, watch } from 'vue';
|
|
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
|
|
|
|
const props = defineProps({
|
|
fileType: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
filePath: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
});
|
|
|
|
const getFullPath = (path) => {
|
|
return getFileAccessHttpUrl(path);
|
|
};
|
|
|
|
const handlePreviewDocument = () => {
|
|
window.open(getFullPath(props.filePath), '_blank');
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.preview-container {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.preview-item {
|
|
margin-bottom: 10px;
|
|
}
|
|
</style> |