fix: avator改为avatar

src/views/AddCoachView.vue

@@ -1,11 +1,13 @@
 <script setup>
-import { ElMessage } from 'element-plus';
+import { ElMessage } from 'element-plus'
 import { reactive, ref } from 'vue'
-import { useRouter } from 'vue-router';
-import { add } from '@/mock/coach';
-import { Plus } from '@element-plus/icons-vue';
+import { useRouter } from 'vue-router'
+import { add } from '../mock/coach.js'
+import { Plus } from '@element-plus/icons-vue'
+
 const router = useRouter()
 const formRef = ref(null)
+
 const coach = reactive({
     name: " ",
     sex: 1,
@@ -18,14 +20,27 @@ const rules = {
         { min: 2, max: 20, message: "教练名字长度 2-20", trigger: "blur" }
     ]
 }
-
 const addHandler = async () => {
     await formRef.value.validate()
+
     add(coach)
-    ElMessage({ type: "success", message: `教练"${coach.name}"添加成功` })
+
+    ElMessage({ type: "success", message: `教练 "${coach.name}" 添加成功` })
+
     router.replace("/coach")
 }
+const uploadChangeHandler = (file, fileList) => {
+    if (fileList.length > 1) { fileList.shift() }
+    const reader = new FileReader()
+    reader.onload = e => {
+        coach.avatar = e.target.result
+    }
+    reader.readAsDataURL(file.raw)
+}
+
 </script>
+
+
 <template>
     <el-form label-width="100px" label-position="left" ref="formRef" :model="coach" :rules="rules">
         <h2 class="title">——新增教练——</h2>
@@ -38,13 +53,14 @@ const addHandler = async () => {
                 <el-radio :value="2">女</el-radio>
             </el-radio-group>
         </el-form-item>
-        <el-form-item label="头像: ">
-            <el-upload class="avatar-uploader" action="" :auto-upload="false" list-type="picture-card">
+        <el-form-item label="头像">
+            <el-upload class="avatar-uploader" action="" :auto-upload="false" list-type="picture-card"
+                :on-change="uploadChangeHandler">
                 <el-icon class="avatar-uploader-icon">
                     <Plus />
                 </el-icon>
                 <template #tip>
-                    <div style="color:red;">提示:上传300*300的png/jpg图片</div>
+                    <div style="color: red;">提示：上传 300*300 的 png/jp(e)g 图片</div>
                 </template>
             </el-upload>
         </el-form-item>
@@ -55,11 +71,36 @@ const addHandler = async () => {
             <el-button type="primary" @click="addHandler">确定</el-button>
             <el-button>取消</el-button>
         </el-form-item>
-    </el-form></template>
+
+
+    </el-form>
+</template>
+
 <style scoped>
 .title {
     text-align: center;
     margin-bottom: 30px;
     color: rgb(196, 86, 86);
 }
+
+.avatar-uploader .el-upload {
+    border: 1px dashed var(--el-border-color);
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+    border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    text-align: center;
+}
 </style>