简述

1、阿里云开通对象存储服务 OSS 并创建Bucket

2、下载PHP SDK至框架扩展目录，点我下载

3、码上code

阿里云操作

开通对象存储服务 OSS

创建 Bucket

配置AccessKey与Access Key Secret

进入管理AccessKey页面 (可将鼠标放在右上角用户头像上，在弹出来的框中点击AccessKey 管理)

找到Bucket对应的外网访问节点

下载 PHP SDK

点我下载

SDK 参考

API参考

SDK 下载完成后放入框架对应的扩展目录

上码

config配置

//阿里云OSS配置

'alioss'        =>[

    'AccessKeyID'      => 'AccessKey ID',

    'AccessKeySecret'  => 'Access Key Secret',

    'EndPoint'   => '外网访问地域节点',

    'Bucket'     => 'Bucket 名称',

],

后端结合SDK实现文件上传至阿里云OSS

以ThinkPHP5为例

<?php

namespace app\controller;

use think\Controller;

use think\Image;

require_once APP_PATH . '/../extend/aliyun-oss/autoload.php'; //引入阿里云OSS SDK，注意替换路径

use OSS\Core\OssException;

use OSS\OssClient;

class AliOssUpload

{

    /**

     * 文件上传接口

     *

     */

    public function uploadFile()

    {

        //接收上传文件

        $file = $this->request->file('file');

        $res = [];

        if($file){

            //调用阿里云OSS上传

            $res = self::AliuploadFile('img', $file);

            if ($res['code'] == 200) {

                //业务逻辑处理......

            }

        }else{

            $res['code']=0;

            $res['msg']='没有上传文件';

        }

        return json($res);

    }

    /**

     * 调用阿里云OSS SDK

     * @param $module 模块

     * @param $file 上传的文件

     * @return array 阿里云OSS上传处理结果

     *

     */

    public static function AliuploadFile($module, $file)

    {

        $resResult = Image::open($file);

        try {

            //获取OSS参数值

            $KeyId = config('alioss.AccessKeyID');

            $KeySecret = config('alioss.AccessKeySecret');

            $EndPoint = config('alioss.EndPoint');

            $Bucket = config('alioss.Bucket');

            //实例化

            $ossClient = new OssClient($KeyId, $KeySecret, $EndPoint);

            //sha1加密 生成文件名 连接后缀

            $fileName = $module . '/' . sha1(date('YmdHis', time()) . uniqid()) . '.' . $resResult->type();

            //执行阿里云上传

            $result = $ossClient->uploadFile($Bucket, $fileName, $file->getInfo()['tmp_name']);

            //图片地址:$result['info']['url']

            $arr = ['code' => 200, 'msg' => '上传成功', 'data' => $result['info']['url']];

        } catch (OssException $e) {

            $arr = ['code' => 0, 'msg' => $e->getMessage(), 'data' => ''];

        }

        return $arr;

    }

}

前端参考代码

前端使用layui，谨慎参考

<div class="layui-upload" id="upload-thumb">

    <label class="layui-form-label">缩略图</label>

    <button type="button" class="layui-btn" id="thumb">上传图片</button>

    <div class="layui-upload-list">

        <label class="layui-form-label"></label>

        <img class="layui-upload-img" id="demo1" width="150" height="150">

        <p id="demoText"></p>

    </div>

</div>

<script>

    //上传图片接口

    layui.use('upload', function(){

        var upload = layui.upload;

        //执行实例

        var uploadInst = upload.render({

            elem: '#thumb' //绑定元素

            ,url: "{:url('AliOssUpload/uploadFile')}" //上传接口

            ,data:{use:'article_thumb'}

            ,done: function(res){

                //上传完毕回调

                if(res.code == 200) {

                    //前台显示预览图

                    $('#demo1').attr('src',res.data);

                    $('#upload-thumb').append('<input type="hidden" name="thumb" value="'+ res.data +'">');

                } else {

                    layer.msg(res.msg);

                }

            }

            ,error: function(){

                //请求异常回调

                //演示失败状态，并实现重传

                var demoText = $('#demoText');

                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');

                demoText.find('.demo-reload').on('click', function(){

                    uploadInst.upload();

                });

            }

        });

    });

</script>