您现在的位置是: 网站首页> PHP> Laravel Laravel

Laravel实现前端上传base64图片

Smile 2020-12-30 PHP Javascript Laravel 阅读:1105

简介前端需要开发一个用户反馈的简单功能,使用cupload.js插件上传用户反馈的截图以及预览功能,后端使用Laravel框架接收,亲测可用

1、下载cupload.js插件并引入

下载地址

2、前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <script src="./static/js/cupload.js"></script>
    <title>用户投诉</title>
    <style>
        .main {margin: 0 30px;padding: 20px 0;}
        .text {width: 100%;height: 150px;resize: none;line-height: 25px;border: none;font-size: 16px;border-bottom: 1px solid #eee;}
        .content {position: relative;}
        .maxnumber {position: absolute;right: 8px;bottom: 15px;}
        .screenshot {border-bottom: 1px solid #eee;}
        .screenshot p {color: #333;font-size: 18px;margin: 20px 0;}
        .url p {margin: 15px 0;font-size: 18px;color: #333;}
        .url input {border-bottom: 1px solid #eee;line-height: 25px;width: 100%;}
        ::-webkit-input-placeholder {color: #d4d4d4 !important;font-size: 14px;}
        .sumbit {width: 100%;text-align: center;}
        .sumbit span {margin: 50px auto;text-align: center;width: 180px;height: 35px;line-height: 35px;display: block;background-color: #e5e5e5;border-radius: 5px;}
    </style>
</head>

<body>
    <div class="main">
        <form id="form">
            <div class="content">
                <textarea class="text" name="content" placeholder="请输入投诉描述" maxlength="200"></textarea>
                <div class="maxnumber"> 0/200</div>
            </div>
            <div class="screenshot">
                <p>证据截图(最多四张)</p>
                <div id="cupload-2"></div>
            </div>
            <div class="sumbit">
                <span>提交</span>
            </div>
        </form>
    </div>
</body>
<script>
    //实例化cupload对象
    var cupload2 = new Cupload({
        ele: '#cupload-2',
        num: 4,
        url: '{{route("upload")}}',  //异步上传url,非必需,无默认值 
        deleteUrl: '{{route("delUpload")}}', //删除url,删除时同时删除服务器图片
        width: 130,
        height: 130,
        maxSize: 2048,
    });
</script>
</html>

3、后台代码

(1)上传接口

引入 use Illuminate\Support\Facades\Storage;

public function upload(Request $request)
{
    $image = $request->get('image');  // your base64 encoded
    preg_match('/^(data:\s*image\/(\w+);base64,)/',$image,$res);
    $image = str_replace($res[1],'', $image);
    $image = str_replace(' ', '+', $image);

    $imagePath= 'gbook/'.time().mt_rand(1000,9999).'.'.$res[2];
    $webPath = '/storage/' . $imagePath;
    Storage::disk('public')->put($imagePath, base64_decode($image));

    return $webPath;
}

(2)删除接口

public function delUpload(Request $request)
{
    $path = $request->get('image');
    $res = unlink('.'.$path);
}

注:$image = str_replace(' ', '+', $image);这行代码很关键,不然上传保存成功之后,图片是损坏的打不开

很赞哦! (0)

文章评论

    2020-12-29666:

    666

站点信息