tp5 webupload文件上传至七牛云
1:composer安装：
composer require qiniu/php-sdk
2：
配置使用：
在tp5.1的配置文件app.php中配置七牛云的参数
'qiniu' => [
'accesskey' => '你的accesskey',
'secretkey' => '你的secretkey',
'bucket' => '存储空间',
'domain' => '域名'
],
3: 前端
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> webuploader上传</title> <!-- 引入webuploader上传--> <link rel="stylesheet" type="text/css" href="/webuploader-0.1.5/webuploader.css"> </head> <body> <div id="uploader" class="wu-example"> <!--用来存放文件信息--> <div id="thelist" class="uploader-list"></div> <div class="btns"> <div id="picker">选择文件</div> <button id="ctlBtn" class="btn btn-default">开始上传</button> </div> <div class="formControls col-xs-4 col-sm-4"> <input type="hidden" value="/static/img/2.jpeg" name="icon" id="icon"/> <img src="/static/img/2.jpeg" id="pic" name="icon" style="width: 50px;"> <button onclick="delimg()">删除图片</button> </div> </div> <!--</form>--> </body> </html> <!-- jq--> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <!-- 引入webuploader上传--> <script type="text/javascript" src="/webuploader-0.1.5/webuploader.js"></script>
/*文件上传*/ var uploader = WebUploader.create({ auto: true, chunked: true, //是否要分片处理大文件上传 chunkSize: 2 * 1024 * 1024, //分片上传，每片2M fileSizeLimit: 2 * 1024 * 1024 * 1024, // 所有文件总大小限制 fileSingleSizeLimit: 2 * 1024 * 1024 * 1024, // 单个文件大小限制 swf: '/webuploader/Uploader.swf',//文件接收服务端。 server: '/img/upfile',//文件接收服务端。 compress: { // 图片质量，只有type为`image/jpeg`的时候才有效。 quality: 90, }, pick: { id: '#picker', // 是否开启选择多个文件的能力 multiple: false }, accept: { //指定接受哪些类型的文件 title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' } }); uploader; //当文件被加入队列以后触发 uploader.on('fileQueued',function(file){ var $li = $( '<div id="' + file.id + '" class="file-item thumbnail" onclick="delUpload(this,'+i+','+num+');">' + '<input type="hidden" name="img[]" id="'+file.id+'id" />'+ '<img>' + '<div class="info">开始上传图片...</div>' + '</div>' ), $img = $li.find('img'); $("#fileList"+i).append($li);//图片添加到容器 var sum = $("#fileList"+i).find('.file-item').length; if(sum >= num){ $("#filePicker"+i).attr('style','display:none;'); } // 创建缩略图显示 uploader.makeThumb(file,function(error,src){ if (error){ $img.replaceWith('<span>不能预览</span>'); return; } $img.attr('src',src); },200,200); }); // 文件上传过程中创建进度百分比实时显示。 uploader.on('uploadProgress',function(file,percentage){ $("#"+file.id+" .info").html('正在上传（'+parseInt(percentage*100)+'%）'); }); //文件上传返回成功，判断是否成功上传到七牛 uploader.on('uploadSuccess', function(file,response){ if(response.code == 0){ $("#"+file.id+" .info").html('上传失败'); }else{ sumimg(num); $("#"+file.id+" .info").html('上传完成,点击图片可删除'); $( '#'+file.id ).addClass('upload-state-done'); $( '#'+file.id+"id").val(response.data);//赋值到input } });
后端路由：
Route::get('img/create','img/img/create'); Route::post('img/upfile','img/img/upfile');
调用七牛
use Qiniu\Auth; use Qiniu\Config; use Qiniu\Storage\BucketManager; use Qiniu\Storage\UploadManager;
控制器：
<?php namespace app\img\controller; use Qiniu\Auth; use Qiniu\Storage\UploadManager; use think\Controller; use think\Request; class Img extends Controller { /** * 显示创建资源表单页. * * @return \think\Response */ public function create() { // return view('img/create'); } /** * 保存新建的资源 * * @param \think\Request $request * @return \think\Response */ public function upfile(Request $request) { // 初始化签权对象 $accesskey=config('qiniu.accesskey'); $secretkey=config('qiniu.secretkey'); $bucket=config('qiniu.bucket'); $domain=config('qiniu.domain'); $auth = new Auth($accesskey,$secretkey); $token = $auth->uploadToken($bucket); // 构建 UploadManager 对象 $uploadMrg = new UploadManager(); // 上传文件到七牛 $files = $_FILES; $values = array_values($files); $saveName = hash_file('sha1', $values[0]['tmp_name']) . time(); $this->assign('saveName',$saveName); list($ret, $err) = $uploadMrg->putFile($token, $saveName, $values[0]['tmp_name']); if ($err !== null) { return getJsonData('500','上传图片失败',''); } else { $data= 'http://' . $domain. '/' . $ret['key']; return getJsonData('200','上传成功',$data); } } public function delete($id) { // } }
参考博客：
https://www.cnblogs.com/BearLee/p/10685018.html#4383580
