ThinkPHP5.0/5.1/6.0 实现附件上传七牛云OSS对象存储

作者: Darren 分类: php 发布时间: 2019-11-16 21:45

好吧,我承认了,一发不可收拾了,搞完腾讯云,又搞阿里云,顺便现在又把七牛云搞了.

前端代码:  需要引入三个文件,一个是css,一个js,一个是swf按钮的,还需要改一个上传的到的路由地址

通过composer安装

composer require qiniu/php-sdk

前端代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>上传演示七牛对象存储</title>
    <!--引入CSS-->
<link rel="stylesheet" type="text/css" href="/static/admin/lib/webuploader/0.1.5/webuploader.css"/>
    <!--引入JS-->
<script type="text/javascript" src="/static/admin/lib/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="/static/admin/lib/webuploader/0.1.5/webuploader.min.js"></script>
    <script type="text/javascript">
      $(function() {
        //开始上传按钮
        var $btn = $('#ctlBtn');
        //文件信息显示区域
        var $list = $('#thelist');
        //当前状态
        var state = 'pending';

        // 上传成功的以后将数据存储
          var value = $('#video');
        //初始化Web Uploader
        var uploader = WebUploader.create({
            // swf文件路径
            swf: '/static/admin/lib/webuploader/0.1.5/Uploader.swf',
            // 文件接收服务端。
            server: "{:url('upload/qiniu')}",
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建,可能是input元素,也可能是flash.
            pick: {
                id: '#picker',
                name:"file",  //这个地方 name 没什么用
                label: '上传视频',
                multiple:true            //默认为true,就是可以多选
            },

            resize: false,
            // 只允许选择图片文件。

        });

        // 当有文件被添加进队列的时候(选择文件后调用)
        uploader.on( 'fileQueued', function( file ) {
            $list.append( '<div id="' + file.id + '" class="item">' +
                '<h4 class="info">' + file.name + '</h4>' +
                '<p class="state">等待上传...</p>' +
            '</div>' );
        });

        // 文件上传过程中创建进度条实时显示。
        uploader.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id );
            $li.find('p.state').text('上传中(' + parseInt(percentage * 100) + '%)');
        });

        // 文件上传成功后会调用
        uploader.on( 'uploadSuccess', function(file,response) {
            var url = response.url
            $( '#'+file.id ).find('p.state').text('已上传');

            value.val(url);
        });

        // 文件上传失败后会调用
        uploader.on( 'uploadError', function( file ) {
            $( '#'+file.id ).find('p.state').text('上传出错');
        });

        // 文件上传完毕后会调用(不管成功还是失败)
        uploader.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress').fadeOut();
        });

        // all事件(所有的事件触发都会响应到)
        uploader.on( 'all', function( type ) {
            if ( type === 'startUpload' ) {
                state = 'uploading';
            } else if ( type === 'stopUpload' ) {
                state = 'paused';
            } else if ( type === 'uploadFinished' ) {
                state = 'done';
            }

            if ( state === 'uploading' ) {
                $btn.text('暂停上传');
            } else {
                $btn.text('开始上传');
            }
        });

        // 开始上传按钮点击事件响应
        $btn.on( 'click', function() {
            if ( state === 'uploading' ) {
                uploader.stop();
            } else {
                uploader.upload();
            }
        });
      });
    </script>
    <style>
      #picker {
        display: inline-block;
      }
      #ctlBtn {
        position: relative;
        display: inline-block;
        cursor: pointer;
        background: #EFEFEF;
        padding: 10px 15px;
        color: #2E2E2E;
        text-align: center;
        border-radius: 3px;
        overflow: hidden;
      }
      #ctlBtn:hover {
        background: #DDDDDD;
      }
    </style>
  </head>
  <body>
  <form action="">
      上传的名:
      <input type="text" name="title">
          <div id="uploader" class="wu-example">
        <div class="btns">
            <div id="picker">选择文件</div>
            <div id="ctlBtn" class="webuploader-upload">开始上传</div>
        </div>
        <!--用来存放文件信息-->
        <div id="thelist" class="uploader-list"></div>
    </div>
      <input type="hidden" name="video" value="" id="video">
      <input type="submit" value="提交">
  </form>
  </body>
</html>

后端代码:

<?php

namespace app\Admin\controller;

use think\Controller;
use think\Request;
use Qiniu\Auth;
use Qiniu\Storage\UploadManager;
use Qiniu\Storage\BucketManager;

/*
 * by:Darren
 * 2019-11-16
 */
class QiniuController extends Controller
{

    private $accessKey = '';  //七牛accessKey
    private $secretKey = '';  //七牛secretKey
    private $domain = '';  //七牛域名
    private $bucket = 'thinkphposs'; //空间名称



    public function postShareupload()
    {
//        获取上传的文件
        $file = request()->file('file');
//        获取文件的信息
        $fileInfo = $file->getInfo();
//        取得后缀名
        $filename = explode('.', $fileInfo['name']);
        // 上传到七牛后保存的文件名
        $key = input('type').'/'.date('Ymd').'/'.md5(time().'http://' . $_SERVER['HTTP_HOST'].rand(0,9999)).'.'.end($filename);  //生成的文件名
         $types = ['video'];//设置允许上传的文件类型
         if (!in_array(explode('/', $fileInfo['type'])[0], $types)) {
            return json(['code' => 0, 'msg' => '类型错误,不支持的文件类型', 'off' => 0]);
        }
        // 初始化 UploadManager 对象并进行文件的上传。
        $uploadMgr = new UploadManager();
        // 调用 UploadManager 的 putFile 方法进行文件的上传。
        $result= $uploadMgr->putFile($this->token(), $key, $fileInfo['tmp_name']);
        if (is_array($result)){

//            这里你自己处理写吧,成功之母处理,是入库还是干嘛来着
//            返回结果实例
//            array(2) {
//              [0] => array(2) {
//                ["hash"] => string(28) "lhvnuhTLvLCnlucFVW6e0EGdYkFt"
//                ["key"] => string(55) "video/mp4/20191116/6c5ca433b7daf78379efa36e177b8148.mp4"
//              }
//              [1] => NULL
//            }
        }else{
            return false;
        }

    }


    public function index(){
        return view('qiniu');
    }


//    生成验证Token
    private function  token(){
        // 构建鉴权对象
        $auth = new Auth($this->accessKey, $this->secretKey);
        // 要上传的空间
        $bucket = $this->bucket;
        //域名
        $domain = $this->domain;
        // 生成上传 Token
       return $token = $auth->uploadToken($bucket);
    }
    /*
     * 验证的门面
     */
    private function auth(){
        // 构建鉴权对象
       return $auth = new Auth($this->accessKey, $this->secretKey);
    }

//    删除执行的资源的
    /*
     * $key   //要删除的文件名在七牛云上的文件名
     * return 成功返回true ,失败返回 false
     */
    public function delete($key){
        $BucketMgr = new BucketManager($this->auth());
        // 调用 BucketManager 的 delete 方法进行文件的删除。
        $result= $BucketMgr->delete($this->bucket, $key);
       if ($result==null){
            return true;
       }else{
           return false;
       }
    }
}

转载请出处,谢谢.

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注