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安全配置
Oct 09 PHP
IIS6的PHP最佳配置方法
Mar 19 PHP
PHP笔记之:日期函数的使用介绍
Apr 24 PHP
php对二维数组按指定键值key排序示例代码
Nov 26 PHP
destoon常用的安全设置概述
Jun 21 PHP
js+php实现静态页面实时调用用户登陆状态的方法
Jan 04 PHP
Thinkphp实现自动验证和自动完成
Dec 19 PHP
Zend Framework教程之配置文件application.ini解析
Mar 10 PHP
浅谈PHP错误类型及屏蔽方法
May 27 PHP
PHP使用文件锁解决高并发问题示例
Mar 29 PHP
PHP利用Mysql锁解决高并发的方法
Sep 04 PHP
laravel 框架结合关联查询 when()用法分析
Nov 22 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
php&amp;java(三)
2006/10/09 PHP
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
php使用递归函数实现数字累加的方法
2015/03/16 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
php删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
2016/06/21 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
10道典型的JavaScript面试题
2017/03/22 Javascript
vue2.0 elementUI制作面包屑导航栏
2018/02/22 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
微信小程序request请求封装,验签代码实例
2019/12/04 Javascript
javascript实现雪花飘落效果
2020/08/19 Javascript
Django的session中对于用户验证的支持
2015/07/23 Python
Python中的日期时间处理详解
2016/11/17 Python
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
Python实现视频下载功能
2017/03/14 Python
python实现简易通讯录修改版
2018/03/13 Python
详解django.contirb.auth-认证
2018/07/16 Python
Python数据类型之Set集合实例详解
2019/05/07 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
房地产销售大学生自我评价分享
2013/11/11 职场文书
宣传口号大全
2014/06/16 职场文书
小学社团活动总结
2014/06/27 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
向女朋友道歉的话
2015/01/20 职场文书
学术会议开幕词
2016/03/03 职场文书
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python
python3 字符串str和bytes相互转换
2022/03/23 Python
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python