<nz-descriptions-item nzTitle="头像" nzSpan="24"> <nz-upload class="avatar-uploader" nzAction="/baseupload" nzListType="picture-card" [nzShowUploadList]="false" [nzBeforeUpload]="beforeUpload" [nzCustomRequest]="customReq" (nzChange)="handleChange($event)"> <ng-container *ngIf="!vConfig.userInfo.portrait"> <i class="upload-icon" nz-icon [nzType]="vConfig.imgLoading ? 'loading' : 'plus'"></i> <div class="ant-upload-text">上传</div> </ng-container> <img *ngIf="vConfig.userInfo.portraitUrl" [src]="vConfig.userInfo.portraitUrl" class="avatar" /> </nz-upload> </nz-descriptions-item>
ng组件地址:上传 Upload - NG-ZORRO (ant.design)
//上传文件之前的钩子 beforeUpload = (file: File) => { return new Observable((observer: Observer<boolean>) => { const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/gif'; if (!isJPG) { this.msgSrv.error('文件上传格式的错误,只能传JPG、JPEG、PNG、GIF格式!'); observer.complete(); return; } const isLt2M = file.size / 1024 / 1024 < 5; if (!isLt2M) { this.msgSrv.error('文件需小于5M'); observer.complete(); return; } observer.next(isJPG && isLt2M); observer.complete(); }); }; //转换上传的文件 customReq = (item: UploadXHRArgs) => { const filereader = new FileReader(); filereader.readAsDataURL(item.file as any); filereader.onload = () => { const result: any = filereader.result; // 转换后的文件数据存储在filereader对象的result中 const image = new Image();// 新建一个img标签 做canvas操作 image.src = result;//加载base64格式的原图 image.onload = () => { const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); // context相当于画笔,里面有各种可以进行绘图的API let imageWidth = 0; let imageHeigth = 0; if (image.width > image.height) {//例如:180*190,截取为180*180 imageWidth = image.height; imageHeigth = image.height; } else { imageWidth = image.width; imageHeigth = image.width; } let imgData = ''; // 存储压缩后的图片 canvas.width = imageWidth; // 设置绘图的宽度 canvas.height = imageHeigth; // 设置绘图的高度 // 使用drawImage重新设置img标签中的图片大小,实现压缩和图片裁剪 context.clearRect(0, 0, canvas.width, canvas.height); // context.drawImage(image, 0, 0, canvas.width, canvas.height); context.drawImage(image, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height); imgData = canvas.toDataURL('image/png');//将canvas上的图片转换为base64格式 if (imgData) { let files = this.base64ToFile(imgData);//将base64 的图片转换成file对象上传 const formData = new FormData(); formData.append('avatar', files); this.http.post("/baseupload", formData).subscribe(res => { if (res.code === 200) { this.vConfig.userInfo.portrait = res.obj.name; this.vConfig.userInfo.portraitUrl = res.obj.url; } }); } } } } // 将base64 的图片转换成file对象上传 base64ToFile(data) { // atob将ascii码解析成binary数据 let binary = atob(data.split(',')[1]); let mime = data.split(',')[0].match(/:(.*?);/)[1]; let array = []; for (let i = 0; i < binary.length; i++) { array.push(binary.charCodeAt(i)); } let fileData = new Blob([new Uint8Array(array)], { type: mime, }); let file = new File([fileData], `${new Date().getTime()}.png`, { type: mime }); return file; } handleChange(info: { file: UploadFile }): void { switch (info.file.status) { case 'uploading': this.vConfig.imgLoading = true; break; case 'done': // Get this url from response in real world. // this.getBase64(info.file!.originFileObj!, (img: string) => { // this.vConfig.imgLoading = false; // this.vConfig.userInfo.portrait = img; // }); const res = info.file.response; this.vConfig.imgLoading = false; if (res.code === 200) { this.vConfig.userInfo.portrait = res.obj.name; this.vConfig.userInfo.portraitUrl = res.obj.url; } break; case 'error': this.msgSrv.error('网络错误'); this.vConfig.imgLoading = false; break; } }
参考:angular7中实现图片上传、图片压缩、图片裁剪功能_yw00yw的博客-CSDN博客