angular上传头像

teacherlist.componen.html的内容：

 <div class="avatar"><nz-avatar [nzSize]="110" [nzSrc]="useravator"></nz-avatar></div><nz-upload [nzAccept]="'.jpg,.jpeg,.png'" [nzShowUploadList]="false" [nzBeforeUpload]="customUpload"(nzChange)="handleChange($event)"><button nz-button class="button_view"><i nz-icon nzType="upload"></i><span>更换头像</span></button></nz-upload>

teacherlist.component.ts的内容：

export class TeacherlistComponent implements OnInit {constructor() {}useravator = '';customUpload = (file: NzUploadFile, fileList: NzUploadFile[]): boolean => {const data = new FormData();// @ts-ignoredata.set('file', file);this.http.post(`https:/upload/website/file?_allow_anonymous=true`, data).subscribe((res) => {if (res.status === 200) {this.msg.success('上传成功');this.useravator = res.avatar;} else {this.msg.error('上传失败');}});return false;// tslint:disable-next-line: semicolon};handleChange({ file, fileList }: UploadChangeParam): void {const status = file.status;if (status !== 'uploading') {console.log(file, fileList);}if (status === 'done') {this.msg.success(`${file.name} file uploaded successfully.`);} else if (status === 'error') {this.msg.error(`${file.name} file upload failed.`);}}
}

angular上传头像相关推荐

js 上传头像img
<label><div class="myusercenter-image-none"><img src="" class=&qu ...
php上传头像的代码,php头像上传预览实例代码
说道上传图片,大家并不陌生,不过,在以后开发的项目中,可能并不会让你使用提交刷新页面式的上传图片,比如上传头像,按照常理,肯定是在相册选择照片之后,确认上传,而肯定不会通过form表单,点击submi ...
上传头像，layui上传图片
layui上传与bootstrap上传相似,只是不需要下插件, layui自带的已够用先看一下前台界面,这里是用到的上传头像先点击开始上传,头像上传至服务器中, 返回json添加至form表单中, ...
ASP.NET MVC3 上传头像图片并截图
关于上传头像并且截图网上应该有很多资料,大多都是JQuery插件,用起来不是很方便本文所介绍的方法将快速完成一个"上传头像图片并截图",只需要修改少量的代码我们先来看看完成后的 ...
php拍视频上传,php视频拍照上传头像功能实现代码分享
现在手机拍照很火,那么如何使用手机拍照并上传头像呢?原因很简单,就是数据传递,首先手机传递照片信息,既不是post传递也不是get函数传递,这个另外一种数据如果要在php中实现视频拍照我们需要借助于 ...
Django搭建个人博客：上传头像图片
到目前为止我们的博客处理的都是文字.现代互联网早就进入了"读图"时代,图片的维护.展示也就相当重要. 上一章中预留了avatar字段,用来保存用户上传的头像,现在我们来实现这个功能 ...
axios获取图片显示_vue中使用axios post上传头像/图片并实时显示到页面的方法
在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮完成图片的上传成功代码部分有参考他人的写法. html代码: 请上传图片 js代码: //实时显示该图片在页面 g ...
如何给Docker hub用户上传头像
我第一次使用Docker hub时,觉得很奇怪,这个网站上面没有允许用户上传头像的地方. 后来经过研究才发现,需要用在Docker hub上注册用户的同一个邮箱到Gravatar这个网站上再注册一个账 ...
koa --- 使用koa-multer和element-ui组件上传头像
文件上传前端代码 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> ...

angular上传头像

angular上传头像相关推荐

最新文章

热门文章