uniapp 头像预览组件

uniapp yekong

uniapp 微信小程序头像预览组件

因为小程序中使用腾讯云cos,所有头像需要异步获取,所以computed计算也需要异步
因为头像有两种,一种是完整的网址的 ,一种是通过key换取网址的,所以需要做一个判断,判断图片是网址还是key,根据src中是否包含http来进行判断。

根据参数判断是否是当前用户头像,如果是且头像无法加载则显示微信小程序默认头像

<template>
	<u--image v-if="imgSrc" shape="circle" :width="size+'rpx'" :height="size+'rpx'" :src="imgSrc">
		<div v-if="whetherCurrentUser" class="userAvatars" slot="error">
		<u-avatar shape="circle" :size="size/2" mp-avatar
			fontSize="24"></u-avatar>	
		</div>
		<u-avatar v-else :size="size/2" slot="error" icon="account-fill" fontSize="24" randomBgColor>
		</u-avatar>
	</u--image>
</template>

<script>
	import configs from '@/config/config.js'
	import getFileAccessUrl from '@/js_sdk/tencentcloud-plugin-cos/get-file-access-url.js';
	export default {
		data() {
			return {
				configs
			}
		},
		components: {},
		asyncComputed: {
			async imgSrc() {
				var imgSrc = ""
				var str = new RegExp("http");
				console.log(str.test(this.src))
				if (str.test(this.src)) {
					imgSrc = this.src
				} else {
					imgSrc = await this.eventHandler()
				}
				return imgSrc
			}
		},
		props: {
			size: {
				type: Number,
				default () {
					return 44;
				}
			},
			whetherCurrentUser: {
				type: Boolean,
				default () {
					return false;
				}
			},
			src: {
				type: String,
				default () {
					return '';
				}
			},
		},
		methods: {
			async eventHandler() {
				try {
					var that = this;
					const url = await getFileAccessUrl(this.src); // 返回的url即前面上传到COS的图片的访问地址(包含临时签名)
					return url
				} catch (error) {
					console.log(error);
				}
			},
		}
	}
</script>
<style scoped lang="scss">
	.userAvatars {
		border-radius: 50%;
		overflow: hidden;
	}
</style>
喜欢