Cropper实现图片的剪切上传

var canvas = this.cropper.getCroppedCanvas({});
				this.imgsrc = canvas.toDataURL();
                // function downLoad(url){
                //     var oA = document.createElement("a");
                //     oA.download = '';// 设置下载的文件名,默认是'下载'
                //     oA.href = url;
                //     document.body.appendChild(oA);
                //     oA.click();
                //     oA.remove(); // 下载之后把创建的元素删除
                // }
                // downLoad(this.imgsrc)
			
				canvas.toBlob((blob)=>{
	                let param = new FormData();
	                param.append('file', blob,"a.png");
	                this.loadingshow = true;
					//config.api.UPLOAD.HANDLE
	                this.$http.post(config.api.UPLOAD.HANDLE,param).then(data=>{
	                	console.info(data)
	                   if(data.data.code=="001"){
	                    this.$Message.info('上传成功');
	                    this.loadingshow = false;
	                    if(this.cropper){
		                    this.cropper.destroy();
							this.cropper = null;
	                    }
	                   }else{
	                       this.$Message.info('上传失败');
	                       this.loadingshow = false;
	                   }
	                })
	            },'image/jpeg')

			},
  • 1.图片剪切完成以后图片变大,在方法中增加参数 “image/jpeg”
  • 2.实现formdata,指定文件名的方式 param.append(‘file’, blob,“a.png”);

猜你喜欢

转载自blog.csdn.net/cuiyuchen111/article/details/94396978