Laravel 七牛雲上傳圖片

Laravel七牛雲上傳圖片DEMO

// html文件
@extends('layouts.admin')

@section('title', '上傳文件')

@section('content')
        <!--我是主要內容 start-->
        <ul class="breadcrumb" style="font-size: 16px;">
            <li><a href="#">首頁</a></li>
            <li><a href="{{ url('admin/files/index') }}">文件管理</a></li>
            <li class="active">上傳文件</li>
        </ul>
        <div class="row">
            <div class="col-md-2 col-md-offset-9">
                <button type="button" class="btn btn-success" onclick="window.history.go(-1);">返回文件列表</button>
            </div>
        </div>
        <form class="form-horizontal">
            {{csrf_field()}}
            <div class="form-group">
                <label for="file_title" class="col-sm-2 control-label">文件標題</label>
                <div class="col-sm-6">
                    <input type="text" name="file_title" class="form-control" id="file_title" placeholder="請輸入文件標題">
                </div>
            </div>
            <div class="form-group">
                <label for="file_path" class="col-sm-2 control-label">文件縮略圖</label>
                <input class="form-conrol col-sm-6 uploadImg" type="file" id="file_path">
                <div class="col-sm-6" style="margin-top: 10px;">
                    <img src="" title="文件縮略圖" width="100" class="img-rounded img-responsive file_path"/>
                    <input type="hidden" name="file_path" id="banner_img" value=""/>
                </div>
            </div>
            <div class="form-group">
                <label for="status" class="col-sm-2 control-label">狀態</label>
                <label class="radio-inline">
                    <input type="radio" name="status" value="0"> 草稿
                </label>
                <label class="radio-inline">
                    <input type="radio" name="status" value="1" checked> 發佈
                </label>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" class="btn btn-success btn-lg" onclick="submitBtn();"> 保 存</button>
                    <button type="button" class="btn btn-warning btn-lg" style="margin-left: 30px;" onclick="window.history.go(-1);"> 返 回</button>
                </div>
            </div>
        </form>
        <!--我是主要內容 end-->
@endsection
@section('my-js')
    <script>
        function submitBtn() {
            var file_title = $('input[name=file_title]').val();
            var file_path = $('input[name=file_path]').val();
            if(file_title === '') {
                layer.msg('banner標題不能爲空');
                return;
            }
            if(file_path === '') {
                layer.msg('banner縮略圖不能爲空');
                return;
            }
            var data = $('.form-horizontal').serialize();
            $.ajax({
                type: "POST",
                url: "/admin/file/create",
                data: data,
                dataType: 'json',
                cache: false,
                success: function (data) {
                    if(data.code === 0) {
                        swal({
                            title: data.msg,
                            text: '',
                            type: 'success',
                            timer: 1000,
                            onOpen: () => {
                                swal.showLoading();
                            },
                            onClose: () => {
                                location.href = '/admin/banner/index';
                            }
                        })
                    }else{
                        layer.msg(data.msg);
                    }
                }
            });
        }

        // 上傳圖片
        $("#file_path").change(function () {
            layer.msg('文件上傳中，請稍等...', {
                shade: [0.3]
            });
            var formData = new FormData();
            formData.append("file", $('#file_path')[0].files[0]);
            formData.append("_token", "{{csrf_token()}}");
            $.ajax({
                type: "POST",
                url: "/admin/file/upload",
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                cache: false,
                success: function (data) {
                    if(data.code === 0) {
                        layer.msg('文件上傳成功');
                        $('.file_path').attr('src', data.src);
                        $('#banner_img').val(data.data);
                    }
                }
            });
        });
    </script>

@endsection

// 服務器端
1.composer require itbdw/laravel-storage-qiniu
2.編輯 config/app.php 
providers 加上一行  itbdw\QiniuStorage\QiniuFilesystemServiceProvider::class,
3.編輯config/filesystems.php,添加
'qiniu' => [  
            'driver'    => 'qiniu',  
            'domain'    => 'xxxxx.bkt.clouddn.com',  //你的七牛域名  
            'access_key'=> '',    //AccessKey  
            'secret_key'=> '',   //SecretKey  
            'bucket'    => '',    //Bucket名字，即七牛雲存儲空間名稱  
        ],  
4.上傳方法
public function upload()
{
    $disk = \Storage::disk('qiniu'); //使用七牛雲上傳
    $time = date('Y-m-d');
    $filename = $disk->put($time, request()->file('file'));//上傳
    if(!$filename) {
    return response()->json(['code' => 1, 'msg' => '上傳失敗']);
    }
    $img_url = $disk->getDriver()->downloadUrl($filename); //獲取下載鏈接
    return response()->json(['code' => 0, 'msg' => '上傳成功', 'src' => $img_url]);
}