lxwx_front/pages/my/editInfo.vue

<template>
<view class="editInfo">
	<view v-if="!uploadPic">
		<u-navbar @leftClick="leftClick" height="50" :autoBack="true">
			<view
				class="u-nav-slot"
				slot="left"
			>
				<u-icon
					name="arrow-left"
					size="19"
				></u-icon>
				<view class="title">
					个人中心
				</view>
			</view>
		</u-navbar>
		<view class="editInfoContent">
			<view class="editItem" style="margin-top:0" @click="modifyPhoto">	
				<view class="editTitle">
					头像修改
				</view>
				<view class="touxiang">
					<image :src="userInfo.avatar" mode="widthFix"></image>
					<u-icon
						name="arrow-right"
						size="20"
					></u-icon>
				</view>
			</view>
			<view class="editItem">
				<view class="editTitle">
					昵称修改
				</view>
				<view class="input">
					<u--input placeholder="请输入昵称" color="#999999" border="none" v-model="userInfo.nickname"
					></u--input>
				</view>
				<image class="editInfoIcon" src="../../static/edit.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="submitBtn" @click="modifyInfoHandle">
			提交
		</view>
	</view>
	<view v-else>
		<okingtz-cropper 
		@back="back"
		selectButtonBackgroundColor="#0076F6"
		saveButtonBackgroundColor="#0076F6"
		@uploadSuccess="uploadSuccess"></okingtz-cropper>
	</view>
</view>
</template>

<script>
// import { dataURLtoFile } from "@/common/common.js";
import { pathToBase64, base64ToPath } from 'image-tools'
import axios from 'axios'
import {modifyInfo,uploadPic} from '@/common/api.js'
import OkingtzCropper from '@/components/okingtz-cropper/components/okingtz-cropper/okingtz-cropper'
export default{
	data(){
		return{
			uploadPic:false,
			userInfo:{}
		}
	},
	components:{OkingtzCropper},
	methods:{
		modifyPhoto(){
			this.uploadPic = true
		},
		back(){
			this.uploadPic = false
		},
		leftClick(){
			uni.navigateTo({
				url:'/pages/my/my'
			})
		},
		uploadSuccess(tempFilePath){
			// uni.showToast({
			// 	title:'保存成功'
			// })
			// 4.根据自己的业务场景处理tempFilePath ;接口保存，或者上传至云空间
			console.log('tempFilePath_->',tempFilePath)
			
			let formData = new FormData()//创建formdata来存文件
			formData.append("file",tempFilePath)
			console.log(formData)
			uni.$u.http.upload('http://lxwx.njrenzhou.cn/api/index/upload',
			
			{
				data:formData,
				dataType:"FormData"

				// header: {
				// 	'Content-Type': 'multipart/form-data',
					
				// },
			}).then((res) => {
				console.log(res,"hhhh")
				// this.$refs.uToast.show({
				// 	message:"收藏成功"
				// })
				// this.isCollect = true
			}).catch((res) =>{
				console.log(res,"hhhh11")
			})
			// uploadPic(formData,{headers: {
			// 	'Content-Type': 'multipart/form-data'
			// }}).then(res=>{
			// 			console.log(res,"7777")
			// 		})
		},
		// base64转化为Blob对象
		base64ToBlob (base64) {
		  const parts = base64.split(";base64,");
		  const contentType = parts[0].split(":")[1];
		  const raw = window.atob(parts[1]);
		  const rawLength = raw.length;
		
		  const uInt8Array = new Uint8Array(rawLength);
		
		  for (let i = 0; i < rawLength; i += 1) {
		    uInt8Array[i] = raw.charCodeAt(i);
		  }
		  return new Blob([uInt8Array], { type: contentType });
			 //  const dataArr = base64.split(",");
			 //  const byteString = atob(dataArr[1]);
			 //  const options = {
				// type: "image/jpeg",
				// endings: "native"
			 //  };
			 //  const u8Arr = new Uint8Array(byteString.length);
			 //  for (let i = 0; i < byteString.length; i++) {
				// u8Arr[i] = byteString.charCodeAt(i);
			 //  }
			 //  return new File([u8Arr],options);//返回文件流
		},

		modifyInfoHandle(){
			let params = {
				nickname:this.userInfo.nickname,
				avatar:this.userInfo.avatar
			}
			modifyInfo(params,{ custom: { auth: true }}).then(res=>{
				console.log(res,)
			}).catch((res)=>{
				console.log(res,"mmm")
			})
		}
	},
	onShow() {
		let userInfo = uni.getStorageSync('userInfo')
		if(userInfo){
			this.userInfo = userInfo;
		}else{
			let pages = getCurrentPages();
			uni.setStorageSync('currentPage',pages[0].route)
			uni.navigateTo({
				url:'/pages/login/login'
			})
		}
		
	}
}
</script>

<style lang="scss" scoped>
.u-nav-slot{
	display: flex;
	align-items: center;
	.title{
		font-size: 36upx;
		color: #222222;
	}
}
.editInfoContent{
	margin:0 24upx;
	margin-top:50px;
	padding-top:20upx;
	.editItem{
		padding:40upx 30upx;
		display: flex;
		background: #FFFFFF;
		border-radius: 20upx;
		justify-content: space-between;
		align-items: center;
		margin:20upx 0;
		.editTitle{
			font-size: 30upx;
			color: #333333;
		}
		.touxiang{
			display: flex;
			align-items: center;
			&>image{
				width: 90upx;
				height: 90upx;
				border-radius: 50%;
				margin-right:20upx;
			}
		}
		.input{
			color:#999999
		}
		.editInfoIcon{
			width:30upx;
			height:30upx;
		}
	}
}
.submitBtn{
	width:64%;
	margin:80upx auto;
	background: #0076F6;
	border-radius: 60upx;
	font-size: 30upx;
	font-weight: 400;
	color: #FFFFFF;
	text-align: center;
	padding:30upx 0;
}
</style>