Colder框架中增加用户头像[通俗易懂]

Colder框架中增加用户头像

正在学习Colder前后端分离开发框架（介绍），我想为用户增加一个头像的功能。首先在MySQL数据库表base_user中增加字段UserLogo . 我先设置了字段类型为mediumblob. 出了很多问题，浪费了时间。保存png, jpg图片应该用mediumtext 类型。

以下步骤是修改程序：

1. 修改后端，很简单，只要在entity项目的Base_User.CS增加：

        /// <summary>
        /// 头像
        /// </summary>
        public string UserLogo { 
    get; set; }

2. 修改前端：
   2.1 在EditForm.vue组件的Template中增加：

<a-form-model-item label="用户头像" prop="UserLogo">
    <a-avatar :src="entity.UserLogo" alt="没有头像" ref="avatarlogo"></a-avatar>
    <a-input type="file" id="txtFile" @change="uploadFile($event)" accept="image/png, image/jpeg" name="upload" style="font-size: 12px;cursor: pointer;direction: rtl ！important; float: right\9; "/>
</a-form-model-item>

2.2 在script部分upload函数的实现：

    uploadFile(event) { 
   
      var files = event.target.files
      for (var i = 0; i < files.length; i++) { 
   
        var file = files[i];
        var imageType = /^image\//;

        if ( !imageType.test(file.type) ) { 
   
          continue;
        }

        var img = this.$refs["avatarlogo"]
        img.file = file
        
        var reader = new FileReader();
        var that = this
        reader.onload = (function(aImg) { 
   
          return function(e) { 
   
            aImg.entity.UserLogo = e.target.result;
          };
        })(that);
        reader.readAsDataURL(file);
      }
    },

实现的效果如下：

这样就完成了，这个框架使用很便捷。如有错误，请不吝指正。