微信头像上传服务器

pages/users/user_info/index.vue

@@ -3,8 +3,13 @@
 		<form @submit="formSubmit">
 			<view class='personal-data' :style="colorStyle">
 				<view class='list'>
-					<view class="item avatar-area">
-						<u-avatar :src="userInfo.avatar" style="margin: auto;" size="82" @click="albumClick" />
+					<view class="item avatar-area" >
+						<view class="avater_button_view">
+							<button class="avater_button" open-type="chooseAvatar" @chooseavatar="chooseavatar">
+								<u-avatar :src="userInfo.avatar" style="margin: auto;" size="82" />
+							</button>
+						</view>
+<!--						<u-avatar :src="userInfo.avatar" style="margin: auto;" size="82" @click="albumClick" />-->
 						<text class="help_info" selectable="false" space="false" decode="false">
 							点击修改头像
 						</text>
@@ -14,7 +19,7 @@
 						<view>昵称</view>
 						<view class='input'>
 							<!-- <text>{{ userInfo.realName }}</text> -->
-							<input type='text' name='name' :value='userInfo.name' />
+							<input type="nickname"  name='name' :value='userInfo.name' />
 						</view>
 					</view>
 					<view class='item acea-row row-between-wrapper'>
@@ -236,6 +241,16 @@ export default {
 	},
 	methods: {
 
+		chooseavatar(e){
+			let _this = this;
+			console.log(e)
+			this.$util.weixinAvatarUpload(e.detail.avatarUrl,
+					function (res) {
+						_this.userInfo.avatar = res.data.link
+				console.log("上传文件成功+++++++++++++++++++",res)
+			})
+		},
+
 		/**
 		 * 上传微信二维码
 		 */
@@ -464,6 +479,16 @@ export default {
 </script>
 
 <style scoped lang="scss">
+	.avater_button_view{
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+	}
+	.avater_button{
+		width: 82px;
+		height: 82px;
+		border-radius: 41px;
+	}
 .cartcolor {
 	color: var(--view-theme);
 	border: 1px solid var(--view-theme);

utils/util.js

@@ -531,6 +531,50 @@ export default {
 			}
 		})
 	},
+
+	/**
+	 * 头像上传
+	 */
+	weixinAvatarUpload:function(url,successCallback, errorCallback){
+		uni.uploadFile({
+			url: HTTP_REQUEST_URL + UPLOAD_URL,
+			filePath: url,
+			fileType: 'image',
+			name: 'file',
+
+			header: {
+				// #ifdef MP
+				"Content-Type": "multipart/form-data",
+				// #endif
+				[TOKENNAME]: 'Bearer ' + store.state.app.token
+			},
+			success: function(res) {
+				uni.hideLoading();
+				if (res.statusCode === 403) {
+					that.Tips({
+						title: res.data
+					});
+				} else {
+					let data = res.data ? JSON.parse(res.data) : {};
+					if (data.code === 200) {
+						successCallback && successCallback(data)
+					} else {
+						errorCallback && errorCallback(data);
+						that.Tips({
+							title: data.msg
+						});
+					}
+				}
+			},
+			fail: function(res) {
+				uni.hideLoading();
+				that.Tips({
+					title: i18n.t(`上传图片失败`)
+				});
+			}
+		})
+	},
+
 	/*
 	 * 单图上传压缩版
 	 * @param object opt