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 相关文章推荐
将OICQ数据转成MYSQL数据
Oct 09 PHP
php 操作调试的方法
Jul 12 PHP
PHP关联链接常用代码
Nov 05 PHP
解析:通过php socket并借助telnet实现简单的聊天程序
Jun 18 PHP
解析PHP中empty is_null和isset的测试
Jun 29 PHP
CI框架自动加载session出现报错的解决办法
Jun 17 PHP
ThinkPHP应用模式扩展详解
Jul 16 PHP
yii操作session实例简介
Jul 31 PHP
护卫神php套件 php版本升级方法(php5.5.24)
May 10 PHP
PHP使用curl模拟post上传及接收文件的方法
Mar 04 PHP
windows下的WAMP环境搭建图文教程(推荐)
Jul 27 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
Oct 16 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
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
php cookis创建实现代码
2009/03/16 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
28个JS验证函数收集
2010/03/02 Javascript
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
2015/01/08 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
浅析jQuery Mobile的初始化事件
2015/12/03 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
jQuery图片轮播实现并封装(一)
2016/12/03 Javascript
js放大镜放大购物图片效果
2017/01/18 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
jquery与js实现全选功能的区别
2017/06/11 jQuery
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
用js简单提供增删改查接口
2019/05/12 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
python 写一个性能测试工具(一)
2020/10/24 Python
Python爬虫爬取ts碎片视频+验证码登录功能
2021/02/22 Python
服务员岗位责任制
2014/02/11 职场文书
党的群众路线学习材料
2014/05/16 职场文书
公司合并协议书范本
2014/09/30 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
董事会决议范本
2015/07/01 职场文书
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
2022/09/23 HTML / CSS