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 相关文章推荐
用php和MySql来与ODBC数据连接
Oct 09 PHP
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
Apr 16 PHP
Ajax PHP 边学边练 之三 数据库
Nov 26 PHP
PHP仿盗链代码
Jun 03 PHP
说说PHP的autoLoad自动加载机制
Sep 27 PHP
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
Aug 07 PHP
php 模拟post_验证页面的返回状态(实例讲解)
Oct 28 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
Jan 21 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
Feb 19 PHP
php实现小程序支付完整版
Oct 09 PHP
PHP大文件切割上传并带进度条功能示例
Jul 01 PHP
Laravel 登录后清空COOKIE的操作方法
Oct 14 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
PHPWind 发帖回帖Api PHP版打包下载
2010/02/08 PHP
php实现SAE上使用storage上传与下载文件的方法
2015/06/29 PHP
JS动画效果代码3
2008/04/03 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
jQuery内存泄露解决办法
2016/12/13 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
python实现将内容分行输出
2015/11/05 Python
使用Kivy将python程序打包为apk文件
2017/07/29 Python
Python无损音乐搜索引擎实现代码
2018/02/02 Python
python入门前的第一课 python怎样入门
2018/03/06 Python
python读文件的步骤
2019/10/08 Python
python实现人机猜拳小游戏
2020/02/03 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
Keras自定义实现带masking的meanpooling层方式
2020/06/16 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
Python request post上传文件常见要点
2020/11/20 Python
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
Noon埃及:埃及在线购物
2019/11/26 全球购物
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
教师聘用意向书
2015/05/11 职场文书
初中团委工作总结
2015/08/13 职场文书
团委副书记工作总结
2015/08/14 职场文书
辞职申请书范本
2019/05/20 职场文书
go语言求任意类型切片的长度操作
2021/04/26 Golang