Laravel5.7+ 使用 AliyunOSS 上传

这里使用到的前端上传组件 layui 上传 aliyun 组件使用的是 johnlui/AliyunOSS

 

安装

composer require johnlui/aliyun-oss:~2.0

　　

构建 Service 文件

新建 app/services/OSS.php 内容可参考: OSS.php，只需要修改下面的信息，变成自己的阿里云 AccessKeyId AccessKeySecret 即可

   private $city = '青岛';
    private $networkType = '经典网络';
    //此处修改成成阿里云的AccessKeyId  AccessKeySecret
    private $AccessKeyId = '';
    private $AccessKeySecret = '';
    private $ossClient;

　　

放入自动加载

在 composer.json 中 autoload -> classmap 处增加配置：

"autoload": {
    "classmap": [
      "app/services"
    ]
  }

　　然后运行 composer dump-autoload。

获取文件路径

创建控制器类 Util/UploadController 控制器用于接收前台上传的图片，上传到阿里云 OSS, 并且拿到返回路径，需要注意的是下面代码中 publicUpload getPublicObjectURL 方法后面第一个参数要换成阿里云 OSS Bucket 名称即可.

namespace AppHttpControllersUtil;

use AppHttpControllersController;
use AppServicesOSS;
use IlluminateHttpRequest;

class UploadController extends Controller
{

    public function upload(Request $request)
    {
        //获取上传的文件
        $file = $request->file('file');
        //获取上传图片的临时地址
        $tmppath = $file->getRealPath();
        //生成文件名
        $fileName = str_random(5) . $file->getFilename() . time() .date('ymd') . '.' . $file->getClientOriginalExtension();
        //拼接上传的文件夹路径(按照日期格式1810/17/xxxx.jpg)
        $pathName = date('Y-m/d').'/'.$fileName;
        //上传图片到阿里云OSS
        OSS::publicUpload('Bucket名称', $pathName, $tmppath, ['ContentType' => $file->getClientMimeType()]);
        //获取上传图片的Url链接
        $Url = OSS::getPublicObjectURL('Bucket名称', $pathName);
        // 返回状态给前端，Laravel框架会将数组转成JSON格式
        return ['code' => 0, 'msg' => '上传成功', 'data' => ['src' => $Url]];
    }
}

　　

前端 Layui 代码

我们使用的 Laravel 框架请求需要携带令牌所以我们需要在 header 和 js 上携带令牌，获取到后端 return 的返回接口可以在 res 接收返回的阿里云地址，创建 form 表单将 res 返回的地址使用 jquery 改变 input 的值，并且触发提交

<meta name="csrf-token" content="{{ csrf_token() }}">

　　

  <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>
    <script>
        layui.use('upload', function () {
            var $ = layui.jquery
                , upload = layui.upload;

            //普通图片上传
            var uploadInst = upload.render({
                elem: '#test1'
                , url: '{{route('util.upload')}}'
                , accept: 'images'
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#icon').attr('src', result); //图片链接（base64）
                    });
                }
                , done: function (res) {
                    //如果上传失败
                    if (res.code > 0) {
                        return layer.msg('上传失败');
                    }
                    //上传成功
                    if (res.code == 0) {
                        console.log(res.data.src);
                        $('#iconUrl').val(res.data.src);
                        $('#saveIcon').submit()
                    }

                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
        });
    </script>

　　

注意

1.OSS.php 文件中 private $city = '青岛'; 所对应的城市，要根据自己 OSS 相对应的地区所选择，如何查看自己的 OSS 地区，请到阿里云 OSS 中查看，修改错误会导致无法连接到阿里云 OSS 服务器

2. 使用 homestead 小伙伴需要把 config/app 文件中 timezone 修改成 PRC

'timezone' => 'PRC',