uniapp上传图片

最新推荐文章于 2024-03-14 20:52:00 发布

.g_g

最新推荐文章于 2024-03-14 20:52:00 发布

阅读量138

点赞数

文章标签： uni-app 前端 javascript

本文链接：https://blog.csdn.net/weixin_45866376/article/details/129243789

版权

<template>
	<view class="photoPage">
		<navBar setColor="#434343"></navBar>
		<view class="arrow" @click="back()"></view>
		<view class="photo">
			<image class="image" v-if="img_url" :src="img_url"></image>
   			<image v-else src="../../../static/image/avatar-default.png" mode="widthFix"></image>
		</view>
		<!-- <input type="text"> -->
		<view class="button" @click="chooseImage">
			<text>更换头像</text>
		</view>
	</view>
</template>

<script>
	import navBar from '../../../components/navBar.vue'
	import { pathToBase64, base64ToPath } from 'image-tools'
	export default {
		components: {navBar},
		data() {
			return {
				img_url: ''
			};
		},
		onLoad(e) {
			this.img_url = e.avatar
		},
		methods: {
			back(){
				uni.navigateBack({
					delta: 1
				})
			},
			updateUserAvatar(image) {
				this.$store.dispatch('user/updateUserAvatar', {
					avatar: image,
				}).then(result => {
					this.img_url = result.avatar.url
					uni.showToast({
						icon: 'none',
						title: '上传成功！'
					})
				})
			},
			chooseImage() {
				let _this = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function (res) {
						console.log(res)
						pathToBase64(res.tempFilePaths[0]).then(path=>{
							_this.img_url = res.tempFilePaths[0]
							_this.updateUserAvatar(path.replace(/data:image\/jpeg;base64,/,''))
						})
					}
				})

			}
		}
	}
</script>

<style lang="less">
	.photoPage {
		width: 100vw;
		height: 100vh;
		background-image:url(../../../static/image/personal/photoPage-background.png);
		
		.arrow {
			transform: rotateZ(-225deg);
			width: 30rpx;
			height: 30rpx;
			border-color: rgba(255, 255, 255, 1);
			margin: 28rpx 0rpx 0rpx 40rpx;
		}
		
		.photo {
			width: 706rpx;
			height: 706rpx;
			border-radius: 50%;
			margin: 200rpx 22rpx 100rpx 22rpx;
			background-color: #eeeeee;
			.image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		
		}
		
		.button {
			width: 636rpx;
			height: 96rpx;
			background-color: rgba(255, 255, 255, 1);
			border-radius: 60rpx;
			margin: 80rpx auto;
			text-align: center;
			text {
				color: rgba(86, 105, 255, 1.0);
				font-size: 32rpx;
				font-weight: bold;
				line-height: 96rpx;
			}
		}
	}
	
</style>