ThinkPHP6结合Layui上传文件或者视频到又拍云云存储

大文件，视频如果放到服务器上，用户打开会很慢，本文教大家如何把文件上传到又拍云云存储上。

一、下载官方sdk

关注“简忆工作室”公众号，回复关键词“又拍云”下载官方sdk

二、放置sdk到指定目录

将下载的sdk放置到项目的extend目录下

三、使用方法

1、引入又拍云sdk

<?php
require_once '../extend/upyunsdk/vendor/autoload.php'; //引入又拍云sdk
use Upyun\Upyun;
use Upyun\Config;
?>

2、上传方法

<?php
 //文件上传
public function uploadVideo(){
  $serviceConfig = new Config('创建的服务的名称', '操作员账号', '操作员密码');
  $client = new Upyun($serviceConfig);
  // dd($client);
  //判断是否是POST请求,如果是处理上传逻辑
  if (request()->isPost()){
    //接收文件上传类型
    $namePath = request()->param('type');
    //获取表单上传文件
    $file = request()->file('file');
    if ($file) {
      // 获取文件的临时路径
      $tempPath = $file->getRealPath();
      // 获取文件名
      $filename = uniqid() . '.mp4'; // 生成唯一文件名
      try {
        // 上传文件到又拍云
        $client->write('/Video/' . $filename, fopen($tempPath, 'r'));
        // 返回成功响应
        return json(['code'=>1,'msg'=>'上传成功','data'=>['src'=>'/Video/' . $filename]]);
      } catch (\Exception $e) {
        // 上传失败
         return json(['code'=>0,'msg'=>$e->getMessage()]);
      }
    }
  }else{
    return json(['code'=>0,'msg'=>'非法请求']);
  }
}
?>

3、完整上传代码

<?php

/**
 *公共文件上传
 * User: Hm
 * Date: 2020/9/16
 * Email: <2938039696@qq.com>
 **/
declare (strict_types = 1);
namespace app\admin\controller;
use think\exception\ValidateException;
require_once '../extend/upyunsdk/vendor/autoload.php'; //引入又拍云sdk
use Upyun\Upyun;
use Upyun\Config;
class Upload extends Base

{
   //文件上传
  public function uploadVideo(){
    $serviceConfig = new Config('创建的服务的名称', '操作员账号', '操作员密码');
    $client = new Upyun($serviceConfig);
    // dd($client);
    //判断是否是POST请求,如果是处理上传逻辑
    if (request()->isPost()){
      //接收文件上传类型
      $namePath = request()->param('type');
      //获取表单上传文件
      $file = request()->file('file');
       
      if ($file) {
        // 获取文件的临时路径
        $tempPath = $file->getRealPath();
        // 获取文件名
        $filename = uniqid() . '.mp4'; // 生成唯一文件名
        try {
          // 上传文件到又拍云
          $client->write('/Video/' . $filename, fopen($tempPath, 'r'));

          // 返回成功响应
          return json(['code'=>1,'msg'=>'上传成功','data'=>['src'=>'/Video/' . $filename]]);
        } catch (\Exception $e) {
          // 上传失败
           return json(['code'=>0,'msg'=>$e->getMessage()]);
        }
      }
    }else{
      return json(['code'=>0,'msg'=>'非法请求']);

    }
  }
}
?>

四、Layui前端HTML部分代码

  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">视频</label>
    <div class="layui-input-block">
      <div class="layui-upload-drag" id="test3">
        <i class="layui-icon"></i>
        <p>点击上传，或将文件拖拽到此处</p>
        <div class="layui-hide" id="uploadDemoView3">
          <input type="text" name="video" id="video" value="" style="color:#888; border:0px; display:block">
        </div>
        <div class="layui-progress layui-progress-big" lay-showPercent="yes" style="display:none">
          <div class="layui-progress-bar" lay-percent="0%"></div>
        </div>
      </div>
    </div>
  </div>

五、Layui前端js代码

<script>
var multiple_images = [];
  layui.use(['upload','form'], function () {
    var form = layui.form,
      layer = layui.layer,
      upload = layui.upload,
      $ = layui.$;
   
    // 视频上传
    upload.render({
      elem: '#test3'
      ,url: '{:url("admin.upload.uploadVideo")}' //改成您自己的上传接口
      ,exts:'MP4'
      ,size: 51200
      ,data:{type:'casevideo'}
      ,progress: function(n, elem){
        $('.layui-progress-big').css('display','block')
       var percent = n + '%';
       $('.layui-progress-bar').css('width', percent);
       $('.layui-progress-bar').attr('lay-percent', percent);
      }
      ,done: function(res){
        layer.msg('上传成功');
        $('.layui-progress-big').css('display','none')
        layui.$('#uploadDemoView3').removeClass('layui-hide').find('input').attr('value', res.data.src);
        layui.$('#video').attr('value', res.data.src);
        console.log(res)
      }
    });
  });
</script>

这里使用后端ThinkPHP框架，结合前端框架Layui实现视频上传到又拍云，供大家参考和使用，有问题，欢迎留下评论共同探讨。