正在学习Colder前后端分离开发框架（介绍），我想为用户增加一个头像的功能。首先在MySQL数据库表base_user中增加字段UserLogo . 我先设置了字段类型为mediumblob. 出了很多问题，浪费了时间。保存png, jpg图片应该用mediumtext 类型。 以下步骤是修改程序：
修改后端，很简单，只要在entity项目的Base_User.CS增加： /// <summary> /// 头像 /// </summary> public string UserLogo { get; set; } 修改前端： 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); } },实现的效果如下： 这样就完成了，这个框架使用很便捷。如有错误，请不吝指正。
