<template>
	<el-upload class="avatar-uploader" ref="upload" action="fakeaction"
	:show-file-list="false"
	:on-change="uploadchangeFile"
	:http-request="uploadSectionFile">
		<img v-if="FrontPhoto" :src="FrontPhoto" class="avatar">
		<i v-else class="el-icon-plus avatar-uploader-icon"></i>
    <div slot="tip" class="el-upload__tip">{{tip}}</div>
	</el-upload>
</template>

<script>
	import { imageUpload } from '@/api/Upload.js'
	export default {
    props:{
      tip:{
        type: String,
        default: ''
      }
    },
		data() {
			return {
				FrontPhoto: '',
			};
		},
		methods: {
			// 上传文件 FrontPhoto
			uploadSectionFile(params) {
				const file = params.file,
					fileType = file.type,
					isImage = fileType.indexOf("image") != -1,
					isLt2M = file.size / 1024 / 1024 < 2;
				console.log(params)
				// 这里常规检验，看项目需求而定
				if (!isImage) {
					this.$message.error("只能上传图片格式png、jpg、gif!");
					return;
				}
				if (!isLt2M) {
					this.$message.error("只能上传图片大小小于2M");
					return;
				}
				// 根据后台需求数据格式
				const form = new FormData();
				console.log(form)
				// 文件对象
				form.append("file", file);

				// 项目封装的请求方法，下面做简单介绍
				imageUpload(form).then(res => {
					//自行处理各种情况
					console.log(res)
					this.$emit('imgUrl',res.filePath)
					// this.FrontPhoto = res.fullUrl
					if(res.msg == '操作成功'){
						this.$message({
							message: '上传成功！',
							type: 'success'
						});
					}
				})
				.catch((err) => {
					console.log(err)
				});
			},
			uploadchangeFile(file){
				this.FrontPhoto = URL.createObjectURL(file.raw)
			}
		}
	}
</script>

<style>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 200px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
  .el-upload__tip{
      line-height: 25px;
      margin-top: 0;
  }
</style>
