1.通过Composer安装七牛云PHP SDK,官方文档https://developer.qiniu.com/kodo/sdk/1283/javascript
2.后端核心代码如下:
use Qiniu\Auth as Auth;
use Qiniu\Config;
use Qiniu\Storage\BucketManager;
use Qiniu\Storage\UploadManager;
......
......
//上传七牛云
function qiniu_upload(){
set_time_limit(120);
ini_set('memory_limit','2000M');
if(!empty($_FILES['file']))
{
$file = request()->file('file');
// 要上传图片的本地路径
$filePath = $file->getRealPath();
$ext = pathinfo($file->getInfo('name'), PATHINFO_EXTENSION); //后缀
//获取当前控制器名称
$controllerName = 'index';
// 上传到七牛后保存的文件名
$key =substr(md5($file->getRealPath()) , 0, 5). date('YmdHis') . rand(0, 9999) . '.' . $ext;
// 需要填写你的 Access Key 和 Secret Key
$accessKey = config('ACCESSKEY');
$secretKey = config('SECRETKEY');
// 构建鉴权对象
$auth = new Auth($accessKey, $secretKey);
// 要上传的空间
$bucket = config('BUCKET');
$domain = config('DOMAINImage');
$token = $auth->uploadToken($bucket);
// 初始化 UploadManager 对象并进行文件的上传
$uploadMgr = new UploadManager();
// 调用 UploadManager 的 putFile 方法进行文件的上传
list($ret, $err) = $uploadMgr->putFile($token, $key, $filePath);
if ($err !== null) {
retErr($err);
} else {
//返回图片的完整URL
$url = $domain.$ret['key'];
echo $url;
}
}
}
3.前端上传组件使用plupload,官方下载地址https://www.plupload.com/
4.选择一款想用的demo,核心代码如下:
......
......
<link rel="stylesheet" href="__PUBLIC__/plupload/js/jquery.plupload.queue/css/jquery.plupload.queue.css" type="text/css" media="screen" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/plupload/js/plupload.full.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/plupload/js/jquery.plupload.queue/jquery.plupload.queue.js"></script>
......
......
<label class="col-sm-2 col-sm-2 control-label">上传七牛云</label>
<div class="col-sm-10">
<div id="uploader" >
<p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
</div>
</div>
</div>
......
......
$(function() {
// Setup html5 version
$("#uploader").pluploadQueue({
// General settings
runtimes : 'html5,flash,silverlight,html4',
url : '{:url("xxx/qiniu_upload")}',//对应后端方法
chunk_size: '400mb',//分片上传
rename : true,
dragdrop: true,
filters : {
// Maximum file size
max_file_size : '500mb',
// Specify what files to browse for
mime_types: [
{title : "Image files", extensions : "jpg,gif,png,mp4"},
{title : "Zip files", extensions : "zip"}
]
},
// Resize images on clientside if we can
resize : {width : 320, height : 240, quality : 90},
flash_swf_url : '__PUBLIC__/js/Moxie.swf',//引入js路径
silverlight_xap_url : '__PUBLIC__/js/Moxie.xap',//引入js路径
init: {
FileUploaded:function(up,file,result){
layer.msg('上传成功');
$('#url').val(result.response);//后端返回的上传文件路径
}
}
});
5.服务器配置参数
添加nginx3个参数:请求时间
fastcgi_connect_timeout 120s;
fastcgi_send_timeout 120s;
fastcgi_read_timeout 120s;
修改php.ini 3个参数:文件大小
memory_limit = 300M
post_max_size = 300M
upload_max_filesize =300M
6.实现结果