FE-V2-XCX/pages/avatar.vue

<!-- 修改头像 -->
<template>
	<view class="avatar-page">
		<view style="height:100%;width:100%;" v-if="src&&src!='null'">
			<image-cropper
				id="image-cropper"
				:zoom="1"
				:angle="0"
				:src="src"
				canvasBackground="red"
				@cropped="cropped"
				@afterDraw="afterDraw"
				@beforeDraw="beforeDraw"/>
		</view>
		<view class="left-button" @click="backButton">取消</view>
		<view class="right-button" @click="upImg">确定</view>
	</view>
</template>

<script>
    import { config } from '@/api/request/config.js'
    import { appAvatar } from '@/api/index.js'
	import ImageCropper from '@/component/cropper.vue'
	export default {
		components: {
			ImageCropper
		},
		data() {
			return {
				src:"",
				srcData:"",
			}
		},
		onLoad(option){
			this.src = option.src;
		},
		onShow(){

		},
		methods:{
			/************************************************修改头像************************************************/
			selectImg() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					sourceType: ['album', 'camera'],
					success: res => {
						var tempFilePaths = res.tempFilePaths
						this.src = tempFilePaths[0]
					}
				})
			},
			beforeDraw(context, transform) {
				context.setFillStyle('yellow')
				transform.zoom = 2
			},
			afterDraw(ctx, info) {
				ctx.fillText('我是一行文字水印', 20, 20)
				console.log(`当前画布大小：${info.width}*${info.height}`)
			},
			cropped(imagePath, imageInfo) {
				console.log("imagePath",imagePath)
				this.srcData = imagePath;
			},

			/************************************************************************************************/
			upImg(){
				let self = this;
				uni.showModal({
				    content: '确认提交吗?',
				    cancelColor:"#999",
				    confirmColor:"#0183FA",
				    success: function (res) {
				        if (res.confirm) {
				            self.uploadImg(self.srcData);
				            console.log('用户点击确定');
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			backButton(){
				uni.navigateBack();
			},
			async uploadImg(tempFilePaths){
			    var self = this;
			    uni.showLoading({
			        title: '上传中',
			        mask: true
			    });
			    uni.uploadFile({
			        url: config.base_url+'/file/upload', //仅为示例，非真实的接口地址
			        header:{'Authorization':uni.getStorageSync('token')},
			        filePath: tempFilePaths,
			        name: 'file',
			        formData: {
			            'user': 'test'
			        },
			        success: (uploadFileRes) => {
			            let res = JSON.parse(uploadFileRes.data);
						if(res.code == 200){
							self.appAvatar(res.data.url);
						}else{
							uni.showToast({
								title: res.msg,
								icon:"none",
								mask:true,
								duration: 2000
							});
						}
			        },
			        fail: err => {},
			        complete: () => {
			            uni.hideLoading()
			        }
			    });
			},
			//修改头像
			async appAvatar(url){
				let obj = {
					imgUrl:url
				}
				const {data} = await appAvatar(obj);
				if(data.code == 200){
					uni.showToast({
						title:'上传成功',
						icon:"none",
						mask:true,
						duration: 2000
					});
                    setTimeout(function(){
                        uni.navigateBack();
                    },2000);
				}
			},
		}
	}
</script>

<style lang="stylus" scoped>
	.avatar-page{
		height:100%;
		width:100%
		.left-button{
			background #E0E0E0;
			color:#333;
			text-align center;
			font-size:26rpx;
			width:140rpx;
			height:60rpx;
			line-height:60rpx;
			position fixed;
			left:40rpx;
			bottom:40rpx;
			z-index:100;
			border-radius:10rpx;
		}
		.right-button{
			background #007AFF;
			color:#fff;
			text-align center;
			font-size:26rpx;
			width:140rpx;
			height:60rpx;
			line-height:60rpx;
			position fixed;
			right:40rpx;
			bottom:40rpx;
			z-index:100;
			border-radius:10rpx;
		}
	}
</style>