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.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>