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


Posted in PHP onSeptember 04, 2017

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

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

<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>

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

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

3.初始化 uploader

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

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
        }
      }
    });
  }

4.后端获取上传凭证token

首先我们先去安装一个七牛的packagist,github地址。

composer require "overtrue/laravel-filesystem-qiniu" -vvv

在app/config.php里面添加

'providers' => [
  // Other service providers...
  Overtrue\LaravelFilesystem\Qiniu\QiniuStorageServiceProvider::class,
],

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

<?php

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

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

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

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
第十四节--命名空间
Nov 16 PHP
弄了个检测传输的参数是否为数字的Function
Dec 06 PHP
PHP下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
Jun 09 PHP
PHP连接Access数据库的方法小结
Jun 20 PHP
php ctype函数中文翻译和示例
Mar 21 PHP
Cygwin中安装PHP方法步骤
Jul 04 PHP
PHP的中使用非缓冲模式查询数据库的方法
Feb 05 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
Sep 16 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
Jun 13 PHP
PHP获取远程http或ftp文件的md5值的方法
Apr 15 PHP
yii2.0框架场景的简单使用示例
Jan 25 PHP
PHP pthreads v3使用中的一些坑和注意点分析
Feb 21 PHP
使用YII2框架实现微信公众号中表单提交功能
Sep 04 #PHP
PHP实现批量重命名某个文件夹下所有文件的方法
Sep 04 #PHP
PHP读取、解析eml文件及生成网页的方法示例
Sep 04 #PHP
PHP钩子与简单分发方式实例分析
Sep 04 #PHP
PHP实现登录注册之BootStrap表单功能
Sep 03 #PHP
[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】
Sep 02 #PHP
php简单读取.vcf格式文件的方法示例
Sep 02 #PHP
You might like
Apache2 httpd.conf 中文版
2006/12/06 PHP
PHP array_multisort() 函数的深入解析
2013/06/20 PHP
php图像验证码生成代码
2017/06/08 PHP
新浪中用来显示flash的函数
2007/04/02 Javascript
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
jquery的trigger和triggerHandler的区别示例介绍
2014/04/20 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
创建自己的jquery表格插件
2015/11/25 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
Angular+Node生成随机数的方法
2017/06/16 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
使用vue制作滑动标签
2019/09/21 Javascript
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
Python实现E-Mail收集插件实例教程
2019/02/06 Python
Python中的字符串切片(截取字符串)的详解
2019/05/15 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
python操作链表的示例代码
2020/09/27 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
2016/03/22 HTML / CSS
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
95%的面试官都会问到的50道Java线程题,附答案
2012/08/03 面试题
生产车间主任的个人自我鉴定
2013/10/25 职场文书
生产经理的自我评价分享
2013/11/07 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
2015年统战工作总结
2015/05/19 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS
MySQL七大JOIN的具体使用
2022/02/28 MySQL
python中 Flask Web 表单的使用方法
2022/05/20 Python