以下Laravel中使用浏览器端上传图片到七牛云,下面只是做一些简单的流程实例。
1. 首先引入相应的js文件,下面是通过CDN引入的,当然也有其他很多方式下载, bower,git,官网的SDK
七牛js基于Plupload插件封装,所以需要下载Plupload,建议使用 2.1.1 ~ 2.1.9。
1 | <script src= "https://cdn.staticfile.org/jquery/2.2.1/jquery.min.js" ></script> |
2 | <script src= "https://cdn.staticfile.org/plupload/2.1.9/moxie.js" ></script> |
3 | <script src= "https://cdn.staticfile.org/plupload/2.1.9/plupload.dev.js" ></script> |
4 | <script src= "https://cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.min.js" ></script> |
2.创建一个选择文件的按钮
1 | < div id = "container" > |
2 | < a class = "btn btn-default btn-lg " id = "pickfiles" href = "#" rel = "external nofollow" > |
3 | < span >选择文件</ span > |
4 | </ a > |
5 | </ div > |
3.初始化 uploader
(请确保在执行初始化时,页面已经引入 plupload),这里我们需要一个uptoken上传凭证,这个需要php后端生成提供。一会下面我们来说怎么获取token。
01 | function uploaderReady(token) { |
02 | console.log(token); |
03 | var uploader = Qiniu.uploader({ |
04 | runtimes: 'html5,flash,html4' , // 上传模式,依次退化 |
05 | browse_button: 'pickfiles' , //上传按钮的ID |
06 | uptoken: token, // uptoken是上传凭证,由其他程序生成 |
07 | // uptoken_url: '/uptoken', // Ajax请求uptoken的Url,强烈建议设置(服务端提供) |
08 | // uptoken_func: function(){ // 在需要获取uptoken时,该方法会被调用 |
09 | // // do something |
10 | // return uptoken; |
11 | // }, |
12 | get_new_uptoken: false, // 设置上传文件的时候是否每次都重新获取新的uptoken |
13 | unique_names: true, // 默认false,key为文件名。若开启该选项,JS-SDK会为每个文件自动生成key(文件名) |
14 | //save_key: true, // 默认false。若在服务端生成uptoken的上传策略中指定了sava_key,则开启,SDK在前端将不对key进行任何处理 |
15 | domain: 'http://ovngj7u9c.bkt.clouddn.com' , // bucket域名,下载资源时用到,必需 |
16 | container: 'container' , // 上传区域DOM ID,默认是browser_button的父元素 |
17 | max_file_size: '100mb' , // 最大文件体积限制 |
18 | flash_swf_url: 'path/of/plupload/Moxie.swf' , //引入flash,相对路径 |
19 | max_retries: 1, // 上传失败最大重试次数 |
20 | dragdrop: true, // 开启可拖曳上传 |
21 | drop_element: 'container' , // 拖曳上传区域元素的ID,拖曳文件或文件夹后可触发上传 |
22 | chunk_size: '4mb' , // 分块上传时,每块的体积 |
23 | auto_start: true, // 选择文件后自动上传,若关闭需要自己绑定事件触发上传 |
24 |
25 | init: { |
26 | 'FilesAdded' : function (up, files) { |
27 | plupload.each(files, function (file) { |
28 | // 文件添加进队列后,处理相关的事情 |
29 | }); |
30 | }, |
31 | 'BeforeUpload' : function (up, file) { |
32 | // 每个文件上传前,处理相关的事情 |
33 | }, |
34 | 'UploadProgress' : function (up, file) { |
35 | // 每个文件上传时,处理相关的事情 |
36 | }, |
37 | 'FileUploaded' : function (up, file, info) { |
38 | // 每个文件上传成功后,处理相关的事情 |
39 | // 其中info是文件上传成功后,服务端返回的json,形式如: |
40 | // { |
41 | // "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98", |
42 | // "key": "gogopher.jpg" |
43 | // } |
44 | // 获取url路径 传入后台保存到数据库 |
45 | var domain = up.getOption( 'domain' ); |
46 | var url = JSON.parse(info); |
47 | var sourceLink = domain + "/" + url.key; |
48 |
49 | $.ajax({ |
50 | url: '/image' , |
51 | type: 'POST' , |
52 | dataType : 'json' , |
53 | data: { |
54 | '_token' : "{{ csrf_token() }}" , |
55 | "url" :sourceLink |
56 | }, |
57 | }); |
58 | }, |
59 | 'Error' : function (up, err, errTip) { |
60 | console.log(errTip); |
61 | }, |
62 | 'UploadComplete' : function () { |
63 | //队列文件处理完毕后,处理相关的事情 |
64 | }, |
65 | 'Key' : function (up, file) { |
66 | // 若想在前端对每个文件的key进行个性化处理,可以配置该函数 |
67 | // 该配置必须要在unique_names: false,save_key: false时才生效 |
68 | var key = "" ; |
69 | // do something with key here |
70 | return key |
71 | } |
72 | } |
73 | }); |
74 | } |
4.后端获取上传凭证token
首先我们先去安装一个七牛的packagist,。
1 | composer require "overtrue/laravel-filesystem-qiniu" -vvv |
在app/config.php里面添加
1 | 'providers' => [ |
2 | // Other service providers... |
3 | Overtrue\LaravelFilesystem\Qiniu\QiniuStorageServiceProvider:: class , |
4 | ], |
然后在config/filesystems.php配置好你的七牛信息
01 | <?php |
02 |
03 | return [ |
04 | //... |
05 | 'qiniu' => [ |
06 | 'driver' => 'qiniu' , |
07 | 'access_key' => env( 'QINIU_ACCESS_KEY' , 'xxxxxxxxxxxxxxxx' ), |
08 | 'secret_key' => env( 'QINIU_SECRET_KEY' , 'xxxxxxxxxxxxxxxx' ), |
09 | 'bucket' => env( 'QINIU_BUCKET' , 'test' ), |
10 | 'domain' => env( 'QINIU_DOMAIN' , 'xxx.clouddn.com' ), // or host: https://xxxx.clouddn.com |
11 | ], |
12 | //... |
13 | ]; |
然后在你控制器store方法中写入获取token的代码,一会好让前端用ajax请求获得
1 | public function store() |
2 | { |
3 | $disk = Storage::disk( 'qiniu' ); |
4 | $token = $disk ->getUploadToken(); |
5 | |
6 | return response()->json([ 'uptoken' => $token ]); |
7 | } |
5.有了token之后我们继续来完善前端代码
为了理解我们写一个ajax去请求store,当然你也可以在uploader里的uptoken_url属性设置请求地址。
01 | function getTokenMessage() { |
02 | $.ajax({ |
03 | url: '你的控制器地址' , |
04 | type: 'POST' , |
05 | data: { '_token' : "{{ csrf_token() }}" }, |
06 | dataType : 'json' , |
07 | success: function (data) { |
08 | var obj = data; |
09 | // 请求成功之后,调用刚刚写好的uploaderReady方法,把token传入过去 |
10 | uploaderReady(obj.uptoken); |
11 | } |
12 | }); |
13 | } |
14 | //让页面初始化的时候就请求 |
15 | $(document).ready( function (){ |
16 | getTokenMessage(); |
17 | }); |
这里差不多就可以啦,更多的操作参考文档
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我爱模板网。