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

来源:脚本之家  责任编辑:小易  

先装php环境,在装composer。这样后台环境就好了,可以安装laravel。前端vuejs这个在开发时需要nodejs环境,所以如果不是在centos上做开发,就不需要安装www.zgxue.com防采集请勿采集本网。

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

其实来 做前端 只会JS 工作少,一般还要会html5,css3的。js还要会一些框架,比如自jquery、angularjs、nodejs(现百在用的比较少)等等。至于学到什么程度,就度是别人的代码要能看得懂,一些问

1. 首先引入相应的js文件,下面是通过CDN引入的StaticfileCDN,当然也有其他很多方式下载, bower,git,官网的SDK

下面给你介绍3种web前端上传图片的方法: 1.表单上传 最传统的图片上传方式是form表单上传,使用form表单的input[type=”file”]控件,打开系统的文件选择对话框,从而达到选择文件并上传的目的

七牛js基于Plupload插件封装,所以需要下载Plupload,建议使用 2.1.1 ~ 2.1.9。

这个base64的编码并不能减小图片,反而增大了,大概增大了1/3。至于有没有其他的方法我就不知道了,不过直接构造Blob对象上传就行了,为什么要上传dataurl

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

这是需要多个方法才能完成的 1,需要动态添加商品那一条显示的function 2,个数那个需要一个增加减少的function 3,需要个统计总数量的 4,需要一个检测checkbox的 你做到什么程度了

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

给你说个思路吧!登录成功之后,把登录信息加密后保存在cookie里面;然后建一个js文件,在这个文件里面做用户是否已登录的判断!如果登录了就直接显示该页面,如果没登录,就跳转回登录页面!这

<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配置好你的七牛信息

<?phpreturn [ //... '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文档

H5的话,就是把本地的图片按照指定的格式读取到缓存里,再供JS代码进行调用传给后台,格式的话base64吧内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • laravel实现上传图片并在页面显示的例子
  • laravel 多图上传及图片的存储例子
  • laravel框架 laravel-admin上传图片到oss的方法
  • laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
  • laravel实现上传图片的两种方式小结
  • laravel框架实现的上传图片到七牛功能详解
  • laravel+intervention实现上传图片功能示例
  • laravel+layer实现图片上传功能(整理篇)
  • php laravel 上传图片、文件等类封装
  • 解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
  • codeigniter实现多文件上传并创建多个缩略图
  • laravel用户授权系统的使用方法示例
  • php获取访问者ip地址汇总
  • 详解laravel设置多态关系模型别名的方式
  • zf框架的校验器使用使用示例(自定义校验器和校验器链)
  • php htmlspecialchars() 函数实例代码及用法大全
  • 常用php框架功能对照表
  • php采集类snoopy详细介绍(snoopy使用教程)
  • php 正则表达式常用函数
  • php连接mssql数据库的几种方法
  • 前端,js实现图片上传的原理是设么??能回答面试即可
  • centos6.6中安装laravel前端是vue.js怎么配置
  • 前端(例如JS)如何实现图片转换文字,尤其是针对身份照片
  • js 前端上传多张图片
  • js好学吗?需要学到什么程度才能去工作,比如前端?
  • web前端上传图片的几种方法
  • 当前使用JS在前端完成图片压缩的有哪些方法
  • 前端用js如何实现购物车功能,如图那样的效果
  • 前端JS 怎么实现用户登陆之后点各个页面都不用再登陆?
  • 我是前端开发的小白,这次有会js的大神吗,就是我自己写了一个图片上传的功能,支持最新浏览器,但是不
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全php基础php技巧php实例php文摘php模板首页php编程php实例laravel实现上传图片并在页面显示的例子laravel 多图上传及图片的存储例子laravel框架 laravel-admin上传图片到oss的方法laravel实现一个上传图片的接口,并建立软链接,访问图片的方法laravel实现上传图片的两种方式小结laravel框架实现的上传图片到七牛功能详解laravel+intervention实现上传图片功能示例laravel+layer实现图片上传功能(整理篇)php laravel 上传图片、文件等类封装解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题codeigniter实现多文件上传并创建多个缩略图laravel用户授权系统的使用方法示例php获取访问者ip地址汇总详解laravel设置多态关系模型别名的方式zf框架的校验器使用使用示例(自定义校验器和校验器链)php htmlspecialchars() 函数实例代码及用法大全常用php框架功能对照表php采集类snoopy详细介绍(snoopy使用教程)php 正则表达式常用函数php连接mssql数据库的几种方法php获取数组长度的方法(有实例)微信公众平台实现获取用户openid教你如何使用php session使用php生成二维码的两种方法(带php发送get、post请求的6种方法简php中把stdclass object转array的微信公众平台网页授权获取用户基laravel框架数据库curd操作、连贯php字符串的连接的简单实例php删除数组中空值的方法介绍php获取操作系统语言代码php设计模式之中介者模式(mediator pattephp之多条件混合筛选功能的实现方法thinkphp5.0框架使用build 自动生成模块操yii2.0小部件gridview(两表联查/搜索/分页thinkphp使用getlist方法实现数据搜索功能php_self,script_name,request_uri区别php+mysql 制作简单的留言本codeigniter配置之autoload.php自动加载用php实现批量上传数据到数据库(.csv格式)的
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved