修改头像

safe-campus-bbs-uniapp/api/api.js

@@ -155,3 +155,12 @@ export function delMonment(momentId){
 		method:'delete'
 	})
 }
+
+// 修改用户信息
+export function updateUserInfo(data){
+	return request({
+		url:'user/profile',
+		method:'put',
+		data
+	})
+}
\ No newline at end of file

safe-campus-bbs-uniapp/components/Dynamic-Item.vue

@@ -2,7 +2,8 @@
 	<view>
 		<view class="dynamic-item" @click="toDynamicDetailPage">
 			<view class="user-info-box" style="position: relative;">
-				<image class="avatar" src="/static/images/default-avatar.png"></image>
+				<image class="avatar" v-if="form.avatar" :src="form.avatar"></image>
+				<image class="avatar" v-else src="/static/images/default-avatar.png"></image>
 				<view class="user-name">{{form.nickName}}</view>
 				<image v-if="deleteable || userInfo.bbsAdmin" class="more-icon" @click.stop="handleDelDynamics"
 					src="/static/images/more-icon.png"></image>

safe-campus-bbs-uniapp/pages/mine/mine.vue

 <template>
 	<view class="page-container">
+		<helang-compress ref="helangCompress"></helang-compress>
 		<view class="mine-header">
 			<view class="user-info-box">
 				<view class="info-box" v-if="userInfo">
-					<image v-if="!userInfo.avatarUrl" src="/static/images/default-avatar.png" class="avatar"></image>
-					<image v-else :src="userInfo.avatarUrl" class="avatar"></image>
+					<image v-if="!userInfo.avatar" src="/static/images/default-avatar.png" class="avatar"
+						@click="handleEditAvatar"></image>
+					<image v-else :src="userInfo.avatar" class="avatar" @click="handleEditAvatar"></image>
 					<view class="name-class">
 						<view class="name">{{userInfo.nickName}}</view>
 						<view class="class-name">{{userInfo.dept.deptName}}</view>
@@ -29,7 +31,8 @@
 		</view>
 
 		<!-- 我发的动态 -->
-		<scroll-view class="my-dynamics" scroll-y :show-scrollbar="false" v-if="list.length >0" @scrolltolower="loadMore">
+		<scroll-view class="my-dynamics" scroll-y :show-scrollbar="false" v-if="list.length >0"
+			@scrolltolower="loadMore">
 			<template v-for="(item,index) in list">
 				<dynamic-item :form="item" @refresh="handleRefresh" :deleteable="true"></dynamic-item>
 			</template>
@@ -43,13 +46,20 @@
 <script>
 	import DynamicItem from '@/components/Dynamic-Item.vue';
 	import ListEmpty from '@/components/ListEmpty.vue';
+	import config from '@/config/index.config.js';
+	import {
+		getToken
+	} from '@/utils/auth.js';
+	import $modal from '@/utils/modal.js'
 	import {
 		getInfo
 	} from '@/api/login.js';
 	import {
 		getDynamicStastics,
-		userDynamics
+		userDynamics,
+		updateUserInfo
 	} from '@/api/api.js';
+	import HelangCompress from '@/components/HelangCompress.vue';
 	export default {
 		data() {
 			return {
@@ -60,12 +70,15 @@
 					pageNum: 1,
 					pageSize: 10
 				},
-				total:0
+				total: 0,
+				uploadUrl: '/bbs/mobile/common/upload', //上传地址
+				baseUrl: config.requestUrl,
 			}
 		},
 		components: {
 			DynamicItem,
-			ListEmpty
+			ListEmpty,
+			HelangCompress
 		},
 		onLoad() {
 			this.getUserInfo();
@@ -90,7 +103,7 @@
 					this.analysisData = res.data
 				})
 			},
-			handleRefresh(){
+			handleRefresh() {
 				this.getStatistics();
 				this.list = [];
 				this.queryParams.pageNum = 1;
@@ -99,21 +112,134 @@
 			// 获取当前用户动态列表
 			getList() {
 				uni.showLoading({
-					title:'加载中...'
+					title: '加载中...'
 				})
 				userDynamics(this.queryParams).then(res => {
-					this.list = [...this.list,...res.rows];
+					this.list = [...this.list, ...res.rows];
 					this.total = res.total;
-				}).finally(()=>{
+				}).finally(() => {
 					uni.hideLoading()
 				})
 			},
 			loadMore() {
-				if(this.list.length < this.total){
+				if (this.list.length < this.total) {
 					this.queryParams.pageNum += 1;
 					this.getList()
 				}
 			},
+			// 修改头像
+			handleEditAvatar() {
+				const _this = this;
+				uni.chooseImage({
+					count: 1,
+					sourceType: ['album', 'camera'],
+					sizeType: ['original', 'compressed'],
+					success(res) {
+						const tempFilePaths = JSON.parse(JSON.stringify(res.tempFilePaths));
+						$modal.loading('上传中...');
+						_this.$refs.helangCompress.compress({
+							src: tempFilePaths,
+							maxSize: 800,
+							fileType: 'jpg',
+							quality: 0.80,
+							progress: (res) => {
+								// console.log('压缩进度');
+								// console.log(res);
+							}
+						}).then((res) => {
+							let tempFile = res.map(item => _this.dataURLtoBlob(item));
+							if (tempFile.length <= 0) {
+								uni.hideLoading();
+								uni.showToast({
+									title: '未识别到图片'
+								})
+								return;
+							}
+							_this.handleUploadPic(tempFile);
+						}).catch((err) => {
+							uni.hideLoading();
+							uni.showToast({
+								title: err
+							})
+						})
+
+					}
+				});
+			},
+			//将base64转换为blob
+			dataURLtoBlob(dataurl) {
+				var arr = dataurl.split(','),
+					mime = arr[0].match(/:(.*?);/)[1],
+					bstr = atob(arr[1]),
+					n = bstr.length,
+					u8arr = new Uint8Array(n);
+				while (n--) {
+					u8arr[n] = bstr.charCodeAt(n);
+				}
+				return new Blob([u8arr], {
+					type: mime
+				});
+			},
+			
+			handleUploadPic(fileList) {
+				const _this = this;
+				let uploadTasks = fileList.map((item, index) => {
+					return uni.uploadFile({
+						url: _this.baseUrl + _this.uploadUrl,
+						file: item,
+						name: 'file',
+						formData: {},
+						header: {
+							Authorization: 'Bearer ' + getToken()
+						},
+						success: (uploadFileRes) => {
+							const data = JSON.parse(uploadFileRes.data);
+							if (data.code === 401) {
+								uni.reLaunch({
+									url: '/pages/login/login'
+								});
+							} else if (data.code === 200) {
+								// 上传成功
+								_this.userInfo.avatar = data.url;
+								_this.uploadSuccess(data)
+							} else if (data.code === 500) {
+								$modal.msg(data.msg || '上传失败');
+							}
+						},
+						fail: (error) => {
+							console.log('上传失败：', error);
+						},
+						// 接口调用结束的回调函数（调用成功、失败都会执行）
+						complete: () => {
+							console.log('上传完成',new Date())
+							uni.hideLoading();
+						}
+					});
+				})
+			
+				Promise.all(uploadTasks).then((res) => {
+					// console.log('所有图片上传完成'); // 所有图片上传成功后执行的逻辑
+				}).catch(err => {
+					console.error('有图片上传失败', err); // 如果有上传失败的情况处理的逻辑
+				});
+			},
+			
+			
+			// 上传成功之后调用更新信息接口
+			uploadSuccess(info){
+				let _this = this;
+				let data = {
+					avatar:info.url,
+				}
+				updateUserInfo(data).then(res=>{
+					_this.$store.dispatch('GetInfo');
+					uni.$emit('hanldeDynamicRefresh')
+					this.list = [];
+					this.queryParams.pageNum = 1;
+					this.getList()
+				})
+			}
+			
 		}
 	}
 </script>