Open huxiuhang opened 4 years ago
base64转成图片文件后再上传
已经转成图片文件,但是出于安全限制,input的type=等于file时,js无法操作更改input的val
`var objUrl = getObjectURL($(e).get(0).files[0]) ;
$("#cutimgbox").removeClass('hidden');
$("#cutimgbox").addClass('show');
$("#cutimg").addClass('show');
$("#cutimg").prop('src',objUrl);
cutframe=layer.open({
type: 1,
area:['900px','600px'],
scrollbar:false,
content: $("#cutimgbox"), //这里content是一个普通的String
btn:['上传'],
yes:function(index, layero){
var cas=$('#cutimg').cropper('getCroppedCanvas');
var base64url=cas.toDataURL('image/jpeg');
var obj=dataURItoBlob(base64url);
// console.log(base64url);
// console.log(obj);
$(e).prev().val(obj)
//想在此处通过aetherupload上传文件
},
success:function(){
$('#cutimg').cropper({
aspectRatio: 1.75,
viewMode:1,
autoCropArea:1,
dragMode:'move'
});
},
end : function() {
$("#cutimgbox").removeClass('show');
$("#cutimgbox").addClass('hidden');
$('#cutimg').cropper('destroy');
}
});`
简单的方法是,裁剪后下载再上传。复杂一点的是改前端代码,裁剪后转成blob对象或者file对象,上传的时候通过blob或者file对象取值而不是input控件,大概是这样。
可以参考这篇文章中的最后一步:https://www.cnblogs.com/anningwang/p/9278006.html
我在你的方法里增加了一个setResource方法,现在可以了
用户上传图片时需要增加裁剪功能,裁剪完成之后再通过aetherupload上传,请问如何操作