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