BomApp/components/preview-file/preview-file.vue

<template>
	<view>
		<template v-if="isPic">
			<view class="file-name" v-if="showName">{{ name }}</view>
			<image class="img" @click="previewImg" :src="src" mode="aspectFill"></image>
		</template>
		<view class="file-name" v-if="!isPic" @click="previewFile">{{ name }}</view>
	</view>
</template>
<script>
	export default {
		props: ["name", "src", "showName"],
		computed: {
			isPic() {
				var reg = /\.(png|jpg|gif|jpeg|webp)$/;
				return reg.test(this.name);
			},
		},
		methods: {
			previewImg() {
				uni.previewImage({
					current: 0,
					urls: [this.src],
				});
			},
			previewFile() {
				console.log(this.src);
				uni.navigateTo({
					url: '/pages/preview/preview?fileSrc=' + this.src
				})
				// uni.showLoading({
				// 	title: "下载中...",
				// 	mask: true,
				// });
				// uni.downloadFile({
				// 	url: this.src,
				// 	success: (res) => {
				// 		if (res.statusCode === 200) {
				// 			uni.openDocument({
				// 				filePath: res.tempFilePath,
				// 				// filePath: escape(res.tempFilePath),
				// 				// 如果文件名包含中文，建议使用escape(res.tempFilePath)转码，防止ios和安卓客户端导致的差异
				// 				success: function(res) {
				// 					console.log("打开文档成功");
				// 				},
				// 			});
				// 		}
				// 	},
				// 	complete: () => {
				// 		uni.hideLoading();
				// 	},
				// });
			},
		},
	};
</script>
<style lang="scss" scoped>
	.img {
		width: 100rpx;
		height: 100rpx;
	}

	.file-name {
		font-size: 30rpx;
		font-weight: bold;
		color: #2f42ca;
		text-decoration: underline;
	}
</style>