Laravel中前端js上传图片到七牛云

3.初始化uploader（请确保初始化时页面已经引入了plupload），这里需要一个uptoken上传凭证，需要php后台生成并提供。等会儿再说说如何拿到token。函数uploaderReady(token){console.log(token);varuploader=Qiniu.uploader({runtimes:'html5,flash,html4',//上传方式，依次退化browse_button:'pickfiles',//上传按钮IDuptoken:token,//uptoken为上传凭证,由其他程序生成//uptoken_url:'/uptoken',//Ajax请求uptoken的Url，强烈建议设置（由服务器提供）//uptoken_func:function(){//这个方法会被需要获取uptoken时调用////dosomething//returnuptoken;//},get_new_uptoken:false,//设置每次上传文件时是否获取新的uptokenunique_names:true,//默认为false，key为文件名，如果开启该选项，JS-SDK会自动为每个文件生成一个key（文件名）//save_key:true,//默认为false。如果服务端生成的uptoken上传策略中指定了sava_key，则开启，SDK不会对前端域的key做任何处理：'http://ovngj7u9c.bkt.clouddn.com',//bucket域名，下载资源时使用，必填'path/of/plupload/Moxie.swf',//引入flash，相对路径max_retries:1,//上传失败最大重试次数dragdrop:true,//启用拖拽上传drop_element:'container',//拖拽上传区元素的ID，拖拽文件或文件夹后，可以触发上传chunk_size:'4mb',//分块上传时，每个chunk的体积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(信息);varsourceLink=domain+"/"+url.key;$.ajax({url:'/image',type:'POST',dataType:'json',data:{'_token':"{{csrf_token()}}","url":sourceLink},});},'错误':function(up,err,errTip){console.log(errTip);},'UploadComplete':function(){//队列文件处理完后，处理相关的东西},'Key':function(up,file){//如果要个性化前面每个文件的key最后，可以配置这个函数//这个配置必须只有当unique_names:falseandsave_key:falsevarkey="";//在这里用键做一些事情returnkey}}});}4。后端获取上传证书token。首先我们安装一个七牛的packagist，github地址composerrequire"overtrue/laravel-filesystem-qiniu"-vvv在app/config.php添加'providers'=>[//其他服务提供者...Overtrue\LaravelFilesystem\Qiniu\QiniuStorageServiceProvider::class,],然后在config/filesystems.php配置你的七牛信息['driver'=>'qiniu','access_key'=>env('QINIU_ACCESS_KEY','xxxxxxxxxxxxxxxxx'),'secret_key'=>env('QINIU_SECRET_KEY','xxxxxxxxxxxxxxxxxx'),'bucket'=>env('QINIU_BUCKET','test'),'domain'=>env('QINIU_DOMAIN','xxx.clouddn.com'),//或主机：https://xxxx.clouddn.com],//...];然后在你controller的store方法中写获取token的代码，一会儿让前端使用ajax请求getpublicfunctionstore(){$disk=Storage::disk('qiniu');$token=$disk->getUploadToken();returnresponse()->json(['uptoken'=>$token]);}5.有了token之后，我们继续完善前端代码。为了理解，我们写了一个ajax来请求商店。当然你也可以在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();});到这里就差不多ok了，更多操作参考七牛云官方js文档