Laravel中前端js上传图片到七牛云的示例代码
以下Laravel中使用浏览器端上传图片到七牛云,下面只是做一些简单的流程实例。
1.首先引入相应的js文件,下面是通过CDN引入的StaticfileCDN,当然也有其他很多方式下载,bower,git,官网的SDK
七牛js基于Plupload插件封装,所以需要下载Plupload,建议使用2.1.1~2.1.9。
2.创建一个选择文件的按钮
选择文件
3.初始化uploader
(请确保在执行初始化时,页面已经引入plupload),这里我们需要一个uptoken上传凭证,这个需要php后端生成提供。一会下面我们来说怎么获取token。
functionuploaderReady(token){ console.log(token); varuploader=Qiniu.uploader({ runtimes:'html5,flash,html4',//上传模式,依次退化 browse_button:'pickfiles',//上传按钮的ID uptoken:token,//uptoken是上传凭证,由其他程序生成 //uptoken_url:'/uptoken',//Ajax请求uptoken的Url,强烈建议设置(服务端提供) //uptoken_func:function(){//在需要获取uptoken时,该方法会被调用 ////dosomething //returnuptoken; //}, 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',//上传区域DOMID,默认是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路径传入后台保存到数据库 vardomain=up.getOption('domain'); varurl=JSON.parse(info); varsourceLink=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时才生效 varkey=""; //dosomethingwithkeyhere returnkey } } }); }
4.后端获取上传凭证token
首先我们先去安装一个七牛的packagist,github地址。
composerrequire"overtrue/laravel-filesystem-qiniu"-vvv
在app/config.php里面添加
'providers'=>[ //Otherserviceproviders... Overtrue\LaravelFilesystem\Qiniu\QiniuStorageServiceProvider::class, ],
然后在config/filesystems.php配置好你的七牛信息
[ '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'),//orhost:https://xxxx.clouddn.com ], //... ];
然后在你控制器store方法中写入获取token的代码,一会好让前端用ajax请求获得
publicfunctionstore() { $disk=Storage::disk('qiniu'); $token=$disk->getUploadToken(); returnresponse()->json(['uptoken'=>$token]); }
5.有了token之后我们继续来完善前端代码
为了理解我们写一个ajax去请求store,当然你也可以在uploader里的uptoken_url属性设置请求地址。
functiongetTokenMessage(){ $.ajax({ url:'你的控制器地址', type:'POST', data:{'_token':"{{csrf_token()}}"}, dataType:'json', success:function(data){ varobj=data; //请求成功之后,调用刚刚写好的uploaderReady方法,把token传入过去 uploaderReady(obj.uptoken); } }); } //让页面初始化的时候就请求 $(document).ready(function(){ getTokenMessage(); });
这里差不多就可以啦,更多的操作参考文档七牛云官方js文档
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。