自定义上传文件"组件"

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Bepthslowly/article/details/88368559

 前端：

注意顺序不要变哈

<Component>
    <input type="hidden" id="image" name="image">
    <img style="width: 40%;display: block" class="imagePreview" src="{{asset("assets/img/no_image.png")}}" id="imgLogo">
    <input id="uploadImg" name="file_upload" onchange="imgUpload(this,'group')" type="file" class="btn btn-default">
</Component>

function imgUpload(event,folder){
    var fileid = $(event).attr("id");
    var data = { 'file_path' : folder };
    uploadFile("#"+fileid,data,function(res,fileid){
        console.log(fileid+"adfasdfasdfasdfasdfasdfas");
        if(res.error==0){
            $(fileid).prev().attr("src",res.data.base_url+res.data.url);
            $(fileid).prev().val(res.data);
        }else{
            alert(res.msg);
        }
    });
}
function uploadFile(fileid,data,callBack){
    var file = $(fileid)[0].files[0];//File对象;
    if(file.size/(1024*1024)>8){
        alert("文件太大");
        return;
    }
    var formData = new FormData();
    formData.append("data",data);
    formData.append("name", "我曾经跨过山河大海，也穿过人山人海");
    formData.append("file", file);
    $.ajax({
        type: 'post',
        async : false,
        url: "/upload",
        data: formData,
        processData: false,
        contentType: false,
        success:function (data) {
            callBack(data,fileid);
        },
        error:function () {
            alert("上传失败");
        }
    })
}

后端：

public function upload(Request $request){
    if($request->ajax()){
        try{
            $file = $request->file('file');
            if($file->isValid()){
                $res = Media::uploadImage("group",$file);
                return $res;
            }
        }catch(\Exception $e){
            return ['error'=>'1', 'msg'=>$e];
        }
    }
    return ['error'=>'1', 'msg'=>'不听话了小子？'];
}

public static function uploadImage($folder,$file)
{
    $extension = $file->getClientOriginalExtension();


    if (!in_array($extension, ["png", "jpg", "gif"])) {
        return ['error'=>'1', 'msg'=>'图片类型需要是png, jpg 或者 gif.'];
    }
    $result = $file->store("group");
    if($result){
        return [
            'error'=>0,
            'msg'=>'上传成功！',
            'data'=>[
                'url'=>$result,
                'base_url'=>env("COS_BASE_URL")
            ]
        ];
    }
    return ['error'=>'1', 'msg'=>'你自己找错吧!'];
}