aida_front/src/component/Account/accountEdit.vue

<template>
    <div class="accountEdit_page">
		<div class="accountEdit_page_head">
			<div class="upload_item">
				<div class="upload_file_item">
					<a-upload
						:action="uploadUrl + '/api/element/upload'"
						:capture="null"
						list-type="picture-card"
						:before-upload="beforeUpload"
						:headers="{Authorization:token}"
						v-model:file-list="fileList"
						:customRequest="function(){}"
						:maxCount="1"
						accept=".jpg,.png,.jpeg,.bmp"
						@change="fileUploadChange"
						>
						<div
							class="upload_tip_block"
						>
							<i class="fi fi-br-upload"></i>
							<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
						</div>
					</a-upload>
				</div>
			</div>
			<img src="../../assets/images/homePage/alipay.svg" alt="">
		</div>
		<div class="accountEdit_page_body">
			<div class="accountEdit_page_body_item">
				<div class="accountEdit_page_body_item_name">昵称:</div>
				<div class="accountEdit_page_body_item_inut">
					<input type="text">
				</div>
			</div>
			<div class="accountEdit_page_body_item">
				<div class="accountEdit_page_body_item_name">用户名:</div>
				<div class="accountEdit_page_body_item_inut">
					<textarea style="max-height: 200px; min-height: 90px;"></textarea>
				</div>
			</div>
			<div class="accountEdit_page_body_item">
				<div class="accountEdit_page_body_item_name">我的签名:</div>
				<div class="accountEdit_page_body_item_inut">
					<input type="text">
				</div>
			</div>
			<div class="accountEdit_page_body_item">
				<div class="started_btn">
					Submit
				</div>
			</div>
		</div>
		<Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isRound="true"></Cropper>
    </div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode} from 'vue'
import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
import { useStore } from "vuex";
import Cropper from '@/component/HomePage/Cropper.vue'
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import { useI18n } from 'vue-i18n'
export default defineComponent({
    components:{
		Cropper,
    },
    setup() {
        const store = useStore();
		let accountHomeData = reactive({
            cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
            uploadUrl:'',
			token:'',
			fileList:[]
		})
		let Cropper = ref()
		// provide('exhibitionList',exhibitionList)
		let handleCropperSuccess = (event:any)=>{
            let {file, fileData} =event
			console.log(file,fileData);
            Cropper.value.closeCropper()
		}
		let beforeUpload=(file:any,fileList:any)=>{
            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
            if (!isJpgOrPng) {
                message.info(useI18n().t('PrintboardUpload.jsContent1'));
            }
            const isLt2M = file.size / 1024 / 1024 < 5;
            if (!isLt2M) {
                message.info(useI18n().t('PrintboardUpload.jsContent2'));
            }
            if(isJpgOrPng && isLt2M){
            // }else{
            //     return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
            }
            
        }
		let  fileUploadChange = (data:any)=>{
            let file = data.file
			// file.id = res.data.id?res.data.id:""
			var reader = new FileReader();
			reader.onload = (e:any) => {
				let data_new;
				if (typeof e.target.result === 'object') {
				// 把Array Buffer转化为blob 如果是base64不需要
				data_new = window.URL.createObjectURL(new Blob([e.target.result]));
				} else {
				data_new = e.target.result;
				}
				Cropper.value.getOptionImg(data_new)
				
				
			};
			// 转化为base64
			// reader.readAsDataURL(file)
			// 转化为blob
			reader.readAsArrayBuffer(file.originFileObj);
			Cropper.value.changeShowModal(true)
        }
		let deletUploadFile = () => {
			accountHomeData.fileList = []
            // let index = -1
            // this.fileList.forEach((ele:any,index1:any) => {
            //     if(this.cropperFileData.uid === ele.uid){
            //         index = index1
            //     }
            // });
            // if(index > -1){
            //     this.fileList.splice(index, 1)
            // }
        }
        return{
           ...toRefs(accountHomeData),
		   Cropper,
		   handleCropperSuccess,
		   beforeUpload,
		   fileUploadChange,
		   deletUploadFile,
        }
    },
    data(){
        return{
            
        }
    },
})
</script>
<style lang="less" scoped>
.accountEdit_page{
	padding: 8rem 5rem;	
	.accountEdit_page_head{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 20rem;
		margin: 0 auto;
		position: relative;
		img{
			width: 20rem;
			height: 20rem;
			border-radius: 50%;
		}
		.accountEdit_page_head_upload{
			width: auto;
		}
		.upload_item{
			position: absolute;
			left: 0;
			transform: translateX(-100%);
		}
		margin-bottom: 5rem;
	}
	.accountEdit_page_body{
		.accountEdit_page_body_item{
			display: flex;
			margin-bottom: 5rem;
			width: 100%;
			.started_btn{
				text-align: center;
			}
			input,textarea{
				padding-left: 2rem;
				border-radius: 4px;
				border: 1px solid #dcdfe6;
				width: 100%;
			}
			.accountEdit_page_body_item_name{
				color: #606266;
				width: 14rem;
				text-align: right;
			}
			.accountEdit_page_body_item_inut{
				margin-left: 2rem;
				flex: 1;
			}
		}
		.accountEdit_page_body_item:last-child{
			justify-content: center;
		}
	}
}
</style>