vue【1-1】el-upload 上传头像预览（自定义上传方法）

目录

完整代码：

1、表单

2、 el-upload

3、 el-dialog

总结

---

继上篇之后，此处给出完整的表单修改

完整代码：

<template>
	  <!-- 个人信息 表单 -->
	  <el-form ref="ruleFormPersonalInfo" :model="ruleFormPersonalInfo" :rules="rulesPersonalInfo" label-width="80px">
		<!-- 用户头像 -->
		<el-form-item prop="url">
			<!-- 头像显示 -->
			<div class="demo-image">
			  <div class="block">
				<!-- fit值：cover 或 contain -->
				<el-image id="image" style="width: 100px; height: 100px" :src="urlBase+ruleFormPersonalInfo.url+'?'+Date()" fit="cover"></el-image>
				<el-button type="text" title="注意！一旦上传则直接修改" onmouseover="" @click="uploadProfile = true">修改头像</el-button>
			  </div>
			</div>
			<!-- 上传头像 dialog弹窗-->
			<el-dialog title="上传头像" width="420px" :visible.sync="uploadProfile" :before-close="beforeDialogClose">
			  <!-- drag upload -->
			  <el-upload
				class="upload-demo"
				ref="upload"
				drag
				accept=".jpg,.jpeg,.png,.JPG,.JPEG"
				list-type="picture"
				:multiple="false"
				:auto-upload="false"
				action="no_use"
				:http-request="uploadPicturePost"
				:before-upload="beforeAvatarUpload"
				:on-change="onchangeUpload"
			  >
				<i class="el-icon-upload"></i>
				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
			  </el-upload>
			  <!-- 头像预览子弹窗 -->
			  <el-dialog width="30%" title="预览头像" :visible.sync="confirmProfile" append-to-body :before-close="beforeDialogClose">
				确认更改头像如下吗？<br>
				<div align="center">
				  <el-image style="width: 200px; he