Laravel中前端js上传图片到七牛云的示例代码PHP应用：

《Laravel中前端js上传图片到七牛云的示例代码PHP应用：》要点：
本文介绍了Laravel中前端js上传图片到七牛云的示例代码PHP应用：，希望对您有用。如果有疑问，可以联系我们。

PHP学习以下Laravel中使用浏览器端上传图片到七牛云,下面只是做一些简单的流程实例.

PHP学习1. 首先引入相应的js文件,下面是通过CDN引入的StaticfileCDN,当然也有其他很多方式下载,bower,git,官网的SDK
七牛js基于Plupload插件封装,所以需要下载Plupload,建议使用 2.1.1 ~ 2.1.9.

PHP学习
<script src="https://cdn.staticfile.org/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/plupload/2.1.9/moxie.js"></script>
<script src="https://cdn.staticfile.org/plupload/2.1.9/plupload.dev.js"></script>
<script src="https://cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.min.js"></script>

PHP学习2.创建一个选择文件的按钮

PHP学习
  <div id="container">
    <a class="btn btn-default btn-lg " id="pickfiles" href="#" rel="external nofollow" >
      <span>选择文件</span>
    </a>
  </div>

PHP学习3.初始化 uploader

PHP学习(请确保在执行初始化时,页面已经引入 plupload),这里我们需要一个uptoken上传凭证,这个需要php后端生成提供.一会下面我们来说怎么获取token.

PHP学习
  function uploaderReady(token) {
    console.log(token);
    var uploader = Qiniu.uploader({
      runtimes: 'html5,flash,html4',// 上传模式,依次退化
      browse_button: 'pickfiles',//上传按钮的ID
      uptoken: token,// uptoken是上传凭证,由其他程序生成
     // uptoken_url: '/uptoken',// Ajax请求uptoken的Url,强烈建议设置(服务端提供)
     // uptoken_func: function(){    // 在需要获取uptoken时,该方法会被调用
     //  // do something
     //  return uptoken;
     // },get_new_uptoken: false,// 设置上传文件的时候是否每次都重新获取新的uptoken
      unique_names: true,// 默认false,key为文件名.若开启该选项,JS-SDK会为每个文件自动生成key(文件名)
      //save_key: true,// 默认false.若在服务端生成uptoken的上传策略中指定了sava_key,则开启,SDK在前端将不对key进行任何处理
      domain: 'http://ovngj7u9c.bkt.clouddn.com',// bucket域名,下载资源时用到,必需
      container: 'container',// 上传区域DOM ID,默认是browser_button的父元素
      max_file_size: '100mb',// 最大文件体积限制
      flash_swf_url: 'path/of/plupload/Moxie.swf',//引入flash,相对路径
      max_retries: 1,// 上传失败最大重试次数
      dragdrop: true,// 开启可拖曳上传
      drop_element: 'container',// 拖曳上传区域元素的ID,拖曳文件或文件夹后可触发上传
      chunk_size: '4mb',// 分块上传时,每块的体积
      auto_start: true,// 选择文件后自动上传,若关闭需要自己绑定事件触发上传
      init: {
        'FilesAdded': function (up,files) {
          plupload.each(files,function (file) {
            // 文件添加进队列后,处理相关的事情
          });
        },'BeforeUpload': function (up,file) {
          // 每个文件上传前,处理相关的事情
        },'UploadProgress': function (up,file) {
          // 每个文件上传时,'FileUploaded': function (up,file,info) {
          // 每个文件上传成功后,处理相关的事情
          // 其中info是文件上传成功后,服务端返回的json,形式如：
          // {
          //  "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",//  "key": "gogopher.jpg"
          // }
          // 获取url路径 传入后台保存到数据库
           var domain = up.getOption('domain');
           var url = JSON.parse(info);
           var sourceLink = domain +"/"+ url.key;
           $.ajax({
            url: '/image',type: 'POST',dataType : 'json',data: {
              '_token':"{{ csrf_token() }}","url":sourceLink
            },});
        },'Error': function (up,err,errTip) {
          console.log(errTip);
        },'UploadComplete': function () {
          //队列文件处理完毕后,'Key': function (up,file) {
          // 若想在前端对每个文件的key进行个性化处理,可以配置该函数
          // 该配置必须要在unique_names: false,save_key: false时才生效
          var key = "";
          // do something with key here
          return key
        }
      }
    });
  }

PHP学习4.后端获取上传凭证token

PHP学习首先我们先去安装一个七牛的packagist,github地址.

PHP学习
composer require "overtrue/laravel-filesystem-qiniu" -vvv

PHP学习在app/config.php里面添加

PHP学习
'providers' => [
  // Other service providers...
  OvertrueLaravelFilesystemQiniuQiniuStorageServiceProvider::class,],

PHP学习然后在config/filesystems.php配置好你的七牛信息

PHP学习
<?php
return [
  //...
  'qiniu' => [
    'driver'   => 'qiniu','access_key' => env('QINIU_ACCESS_KEY','xxxxxxxxxxxxxxxx'),'secret_key' => env('QINIU_SECRET_KEY','bucket'   => env('QINIU_BUCKET','test'),'domain'   => env('QINIU_DOMAIN','xxx.clouddn.com'),// or host: https://xxxx.clouddn.com
  ],//...
];

PHP学习然后在你控制器store方法中写入获取token的代码,一会好让前端用ajax请求获得

PHP学习
public function store()
{
  $disk = Storage::disk('qiniu');
  $token = $disk->getUploadToken();
  
  return response()->json(['uptoken'=>$token]);
}

PHP学习5.有了token之后我们继续来完善前端代码

PHP学习为了理解我们写一个ajax去请求store,当然你也可以在uploader里的uptoken_url属性设置请求地址.

PHP学习
function getTokenMessage() {
  $.ajax({
    url: '你的控制器地址',data: {'_token':"{{ csrf_token() }}"},success: function (data) {
      var obj = data;
      // 请求成功之后,调用刚刚写好的uploaderReady方法,把token传入过去
      uploaderReady(obj.uptoken);
    }
  });
}
//让页面初始化的时候就请求
$(document).ready(function(){
  getTokenMessage();
});

PHP学习这里差不多就可以啦,更多的操作参考文档七牛云官方js文档

PHP学习以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家.

（编辑：安卓应用网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!