PHP系列 | Thinkphp3.2 上传七牛 bad token 问题 [ layui.upload 图片/文件上传]

前端代码

<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})
            }
        });
    });
});