fix: user avatar upload example, the picture does not display problem

hug-sun · Nov 19, 2020 · 6b15e72 · 6b15e72
1 parent f363929
commit 6b15e72
Showing 1 changed file with 5 additions and 6 deletions.
diff --git a/examples/docs/zh-CN/upload.md b/examples/docs/zh-CN/upload.md
@@ -67,8 +67,8 @@
   :show-file-list="false"
   :on-success="handleAvatarSuccess"
   :before-upload="beforeAvatarUpload">
-  <img v-if="imageUrl" :src="imageUrl" class="avatar">
-  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+<img v-if="imageUrl" :src="imageUrl" class="avatar">
+<i v-else class="el-icon-plus avatar-uploader-icon"></i>
 </el-upload>
 
 <style>
@@ -82,7 +82,7 @@
   .avatar-uploader .el-upload:hover {
     border-color: #409EFF;
   }
-  .avatar-uploader-icon {
+  .avatar-uploader .avatar-uploader-icon {
     font-size: 28px;
     color: #8c939d;
     width: 178px;
@@ -98,14 +98,13 @@
 </style>
 
 <script>
-  import { ref , getCurrentInstance } from 'vue';
+  import { ref } from 'vue';
   export default {
     setup(){
       const imageUrl = ref('');
 
-      const self = getCurrentInstance().ctx;
       const handleAvatarSuccess = (res, file) => {
-        self.imageUrl = URL.createObjectURL(file.raw);
+        imageUrl.value = URL.createObjectURL(file.raw);
       }
       const beforeAvatarUpload = (file) => {
         const isJPG = file.type === 'image/jpeg';