peinhu / AetherUpload-Laravel

A Laravel package to upload large files 上传大文件的Laravel扩展包
GNU General Public License v2.0
919 stars 126 forks source link

怎样才能支持base64图片文件的上传? #83

Open huxiuhang opened 4 years ago

huxiuhang commented 4 years ago

用户上传图片时需要增加裁剪功能,裁剪完成之后再通过aetherupload上传,请问如何操作

peinhu commented 4 years ago

base64转成图片文件后再上传

huxiuhang commented 4 years ago

已经转成图片文件,但是出于安全限制,input的type=等于file时,js无法操作更改input的val

huxiuhang commented 4 years ago

`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');

        }
    });`
peinhu commented 4 years ago

简单的方法是,裁剪后下载再上传。复杂一点的是改前端代码,裁剪后转成blob对象或者file对象,上传的时候通过blob或者file对象取值而不是input控件,大概是这样。

peinhu commented 4 years ago

可以参考这篇文章中的最后一步:https://www.cnblogs.com/anningwang/p/9278006.html

huxiuhang commented 4 years ago

我在你的方法里增加了一个setResource方法,现在可以了