uni-app的头像上传

最新推荐文章于 2024-07-22 15:41:43 发布

梧桐芊羽

最新推荐文章于 2024-07-22 15:41:43 发布

阅读量2.4k

点赞数 3

分类专栏： uni-app

本文链接：https://blog.csdn.net/ee_11eeeeee/article/details/114381299

版权

uni-app 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

page.json配置路由

	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		
		{
		    "path" : "pages/photo/photo",
		    "style" :                                                                                    
		    {
		        "navigationBarTitleText": "用户信息",
		        "enablePullDownRefresh": false
		    }
		    
		},
		{
		    "path" : "pages/photo/upload/upload",
		    "style" :                                                                                    
		    {
		        "navigationBarTitleText": "头像上传",
		        "enablePullDownRefresh": false,
				"navigationBarBackgroundColor":"#000000"//设置顶部背景
		    }
		    
		}
		]

photo.vue头像

<template>
	<view>
		<view class="avartar" @click="uploadImag()">
			<text>头像</text>
			<image :src="imgsrc" style="width: 80px;height: 50px;border-radius: 50%;" mode=""></image>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgsrc:'https://scpic.chinaz.net/files/pic/pic9/202102/apic31106.jpg'
			}
		},
		methods: {
			uploadImag(){
				uni.showActionSheet({
					itemList:['查看头像','从相册选择'],
					success: (res) => {
						let index=res.tapIndex;
						if(index==0){
							//查看头像
							var avatarArr=[];
							avatarArr.push(this.imgsrc)
							uni.previewImage({
								urls:avatarArr,
								current:avatarArr[0]
							})
						}else if(index==1){
							//选择头像上传
							uni.chooseImage({
								count:1,
								sizeType:["compressed"],
								sourceType:["album"],
								success:(res)=>{
									var filePath=res.tempFilePaths[0];
									//跳转相册选择组件
									uni.navigateTo({
										url:"upload/upload?tempFilePath="+filePath
									})
								}
							})
						}
					}
				})
			}
			
		}
	}
</script>

<style scoped>

.avartar{
	display: flex;
	align-items: center;
	margin: 30rpx;
}
.avartar text{
	font-size: 30rpx;
	margin: 0 20rpx;
}
</style>

upload.vue上传头像组件


<template>
	<view class="upload-img">

		<view class="upload-image">
			<image v-if="tempImg" :src="tempImg" mode="scaleToFill"></image>
			<text v-if="!tempImg">暂无图片</text>
		</view>
		<view class="upload-notice">
			<view class="upload-words">
				请从相册中选择等比宽高德图
			</view>
		</view>
		<view class="upload-image-but">
			<text @click="uploadImg()">图片上传</text>
			<text @click="chooseImg()">重新选择</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				image: '',
				tempImg: ''
			}
		},
		//获取传递的图片路径
		onLoad(params) {
			var filePath = params.tempFilePath;
			this.tempImg = filePath;
			console.log('赘婿',this.tempImg)
		},
		methods: {
			
			//上传图片
			uploadImg() {
				//等待时长
				uni.showLoading({
					mask:true,
					title:'上传中，请稍后'
				})
				//上传图片
				uni.uploadFile({
					url:'http://192.168.35.55:8080/upload/',//开发者服务器 url
					filePath:this.tempImg,
					name:"file",
					header:{
						"token":'aaa'
					},
					success:(res)=>{
						console.log(res);
						var resData= res.data;
						if(resData.status==200){
							var userInfo =resData.data;
							uni.setStorageSync("globalUser",userInfo);
							uni.navigateBack({
								delta:1
							})
						}else{
							uni.showToast({
								title:'上传失败'
							})
						}
					},
					fail:(err)=>{
						console.log('上传失败',err)
					}
				})
			},
			//重选头像
			chooseImg() {
				uni.chooseImage({
					count: 1,
					sizeType: ["compressed"],
					sourceType: ["album"],
					success: (res) => {
						var filePath = res.tempFilePaths[0];
						this.tempImg = filePath;
					}
				})

			}
		}
	}
</script>

<style scoped>
	.page {
		width: 100%;
		height: 100% !important;
	}

	.upload-img {
		background: #000000;
		color: #FFFFFF;
	}
</style>