自定义上传文件"组件"

 前端:

注意顺序不要变哈

<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'=>'你自己找错吧!'];
}

 

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值