前端代码
<div class="logo_out" id="upload-logo"></div>
JS代码
/** * 上传图片 */ layui.use('upload', function () { var upload = layui.upload; var uploadInst = upload.render({ elem: '#upload-logo' //绑定元素 , url: "{:U('plan/imageUpload')}" //上传接口 , accept: 'file' , done: function (res) { console.log(res); if (res.code === 200) { $('.input_img').attr('src', res.url); $('#team_logo').val(res.url); } else { layer.msg(res.msg, {icon: 5}); } } , error: function () { layer.msg('上传异常', {icon: 2}) } }); });
后端代码
/** * +---------------------------------------------------------- * 图片上传 * +---------------------------------------------------------- */ public function imageUpload() { $upload = new \Think\Upload(C('UPLOAD_SITEIMG_QINIU')); $res = $upload->upload(); if ($res) { $this->ajaxReturn(['code' => 200, 'msg' => '上传成功', 'url' => $res['file']['url']]); } else { $this->ajaxReturn(['code' => 100, 'msg' => $upload->getError()]); } }
七牛配置文件
/*七牛配置*/ 'UPLOAD_SITEIMG_QINIU' => array( 'maxSize' => intval(str_replace(array('M', 'm'), array('00000000', '00000000'), ini_get('post_max_size'))),//文件大小 'rootPath' => './', 'saveName' => array('uniqid', ''), 'driver' => 'Qiniu', 'driverConfig' => array( 'secrectKey' => '1sHgOVv7CzzjGo2yXTIba', 'accessKey' => 'u-a7StH', 'domain' => 'source.baidu.com', 'bucket' => 'www', ) ),
解决办法:修改框架集成源码文件
解决完后报"incorrect region, please use up-z0.qiniup.com"这个是区域不对,所以把改成华南的域名,华东、华北的要改成相应的域名即可。
上传一些大文件需要等待状态
layui.use('upload', function () { var upload = layui.upload; //执行实例 var uploadListIns = upload.render({ elem: '#addFile' , url: '/group/studentUpload/'+gid , accept: 'file' , multiple: true , exts: 'xls' , auto: false , bindAction: '#submitBtn' // 手动上传按钮 , before: function (obj) { $(".adminmodule_add_content").hide(); layer.msg('批量导入中,请稍后...', {icon: 16,shade: 0.1}); } , done: function (res, index, upload) { if (res.code === 200) { layer.msg(res.msg, {icon: 1}, function () { window.location.reload(); }); }else{ layer.msg(res.msg, {icon: 2,time:5000}); } } , error: function (index, upload) { layer.msg('上传异常', {icon: 2}); } }); });
如果服务端接受文件名不是file,是使用以下数组名接受的,则需要在layui中增加参数 field字段 [设定文件域的字段名,默认为:file]
$_FILES['Filedata']
修改后
, size: '1024' , field: 'Filedata'
一次指定上传多个绑定
HTML
<div class="logo_out" id="upload_1"></div> <div class="logo_out" id="upload_2"></div> <div class="logo_out" id="upload_3"></div> <div class="logo_out" id="upload_4"></div> <div class="logo_out" id="upload_5"></div> <div class="logo_out" id="upload_6"></div>
JS
layui.use('upload', function(event){ var upload = layui.upload; //执行实例 $.each( [1,2,3,4,5,6], function(i, n){ var obj = '#upload_'+n; var uploadInst = upload.render({ elem: obj //绑定元素 ,url: "{:U('plan/imageUpload')}" //上传接口 ,exts: 'jpg|png|jpeg' ,accept: 'file' ,done: function(data){ if (data.code == 200){ $(obj).find('.input_img').prop('src',data.data.url); $(obj).find('.input_img').show() $(obj).find('.onload_delete').show() $(obj).find('.no_input').hide() $(obj).find('input').val(data.data.id) }else{ layer.msg(data.msg, {icon : 2}) } } ,error: function(){ layer.msg('上传异常', {icon : 2}) } }); }); });