fix 修复头像上传成功/取消后无法清空图片的问题

Web/src/pages/system/account/setting/info.vue

@@ -4,16 +4,12 @@
       <h4 class="h4">我的信息</h4>
       <div class="yo-avatar-info">
         <yo-image :id="form.avatar" :size="128" icon="user" type="avatar" />
-        <div @click="avatar.cropper = true" class="yo-avatar-info--cover">
+        <div @click="onAvatarStart" class="yo-avatar-info--cover">
           <a-icon type="cloud-upload-o" />
         </div>
       </div>
       <br />
-      <a-card :key="avatar.key" v-if="avatar.cropper">
+      <a-card v-if="avatar.cropper">
-        <a-alert type="error">
-          <template slot="message">上传完成时无法被销毁</template>
-        </a-alert>
-        <br />
         <a-row :gutter="16" align="middle" type="flex">
           <a-col :span="12">
             <div class="yo-avatar-cropper">
@@ -56,7 +52,7 @@
               icon="check"
               type="primary"
             >确认</a-button>
-            <a-button @click="avatar.cropper = false" icon="close">取消</a-button>
+            <a-button @click="onAvatarCancel" icon="close">取消</a-button>
           </a-col>
         </a-row>
       </a-card>
@@ -172,7 +168,6 @@ export default {
       form: {},
 
       avatar: {
-        key: Date.now(),
         cropper: false,
         img: '',
         autoWidth: 200,
@@ -223,6 +218,10 @@ export default {
       return false;
     },
 
+    onAvatarStart() {
+      this.avatar.cropper = true;
+    },
+
     onAvatarOk() {
       this.avatar.uploading = true;
       this.$refs.cropper.getCropBlob(async (data) => {
@@ -233,17 +232,35 @@ export default {
           const { data: fileId } = await this.$api.sysFileInfoUpload(fd);
           this.form.avatar = fileId;
 
-          this.avatar.cropper = false;
+          this.onAvatarCancel();
         } finally {
           this.avatar.uploading = false;
         }
       });
     },
 
+    onAvatarCancel() {
+      this.avatar = {
+        ...this.avatar,
+        ...{
+          cropper: false,
+          img: '',
+          preview: {},
+          file: null,
+        },
+      };
+    },
+
     async onSaveInfo() {
       this.saving = true;
       try {
-        await this.$api.sysUserUpdateInfo(this.form);
+        await this.$api.sysUserUpdateInfo({
+          avatar: this.form.avatar,
+          nickName: this.form.nickName,
+          birthday: this.form.birthday,
+          sex: this.form.sex,
+          tel: this.form.tel,
+        });
         await this.onRefreshInfo();
         this.$message.success('更新个人信息成功');
       } finally {