1、npm install ngx-image-cropper --save
2、module 导入
import { NgModule } from '@angular/core';
import { ImageCropperModule } from 'ngx-image-cropper';
@NgModule({
imports: [
...
ImageCropperModule
],
declarations: [
...
],
exports: [
...
],
providers: [
...
]
})
export class YourModule {
}3.html
<div style="width: 100%;">
<label for="uploadImage" class="uploadbtn">点击上传图片</label>
<input id="inputUpload" type="file" accept="image/png image/jpg" (change)="fileChangeEvent($event)" id="uploadImage" hidden="hidden">
<div>
<img *ngIf="sumitImg==''" style="margin-top: 20px" src="assets/imgs/product.svg" />
<img *ngIf="sumitImg!=''" style="margin-top: 20px" [src]="sumitImg" />
</div>
</div>
<nz-modal [(nzVisible)]="cropperImg" nzTitle="裁剪图片" (nzOnCancel)="handleCancel()" [nzFooter]="nonefooterInfo">
<div style="width:100%">
<image-cropper
[imageChangedEvent]="imageChangedEvent"
[maintainAspectRatio]="true"
[aspectRatio]="3 / 3"
format="png,jpg"
(imageCropped)="imageCropped($event)"
(imageLoaded)="imageLoaded()"
(cropperReady)="cropperReady()"
(loadImageFailed)="loadImageFailed()"
></image-cropper>
</div>
<div class="text-center margint20">
<button nz-button nzType="primary" class="button_grey_hover_H32 marginr20" (click)="handleCancel()">取消</button>
<button nz-button nzType="primary" class="button_grey_hover_H32 " (click)="submitImg()">确认</button>
</div>
</nz-modal>
<ng-template #nonefooterInfo></ng-template>4.ts
import { ImageCroppedEvent } from 'ngx-image-cropper';
croppedImage: any = '';
sumitImg:any = "";
cropperImg= false;
imgFile:any = "";
fileChangeEvent(event: any): void {
console.log(event.target.files[0]);
this.imgFile= event.target.files[0]
const isJPG = this.imgFile.type === 'image/jpeg';
const isPNG = this.imgFile.type === 'image/png';
if (!isJPG && !isPNG) {
this.msg.error('请上传jpg或png文件!');
return;
}
const isLt2M = this.imgFile.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.msg.error('图片大小不能超过2MB!');
return;
}
this.imageChangedEvent = event;
this.cropperImg = true;
}
imageCropped(event: ImageCroppedEvent) {
this.croppedImage = event.base64;
console.log(event)
}
imageLoaded() {
// show cropper
}
cropperReady() {
// cropper ready
}
loadImageFailed() {
// show message
}
handleCancel() {
this.cropperImg = false;
this.imageChangedEvent.target.value = "";
}
submitImg() {
this.cropperImg = false;
this.sumitImg = this.croppedImage;
let formData = new FormData();
formData.append("image",this.imgFile)
this.ProductService.uploadImg(formData).subscribe((res:any) => {
console.log(res);
if(res.Code == 200) {
this.data.thumb = res.Url;
this.imageChangedEvent.target.value = "";
} else {
this.msg.create("error",res.Msg)
}
});
}在做这个功能过程过遇到的问题
1、不能再上传上次提交过的图片，这里只需要
this.imageChangedEvent.target.value = "";
this.imageChangedEvent 是引用了fileChangeEvent(event)中的event，所以只需要改变this.imageChangedEvent.target.value 就可以了
service
//上传图片
uploadImg(params) {
const url = this.restServer + '/api/v1/upload/image';
return this.http.post(url, params);
}如果报错：no multipart boundary param in Content-Type
注意不要去添加Content-Type，去掉
