laravel+WeAdmin(layui)使用js实现图片上传回显至七牛云

layui自带的upload模块可以帮助我们快速上传图片，现在我们需要将图片使用layui组件上传至七牛云，一起来学习如何实现的吧！

1.进入到项目根路径，跑七牛云官方包

composer require qiniu/php-sdk

2.根据Access Key 和 Secret Key获取到我们所需要的上传token

2.1我们在api路由上新增一条路由规则

Route::namespace('Admin')->group(function () {
    Route::get('/qiniutoken', 'QiniuController@token');
});

2.2创建一个控制器，用于获取七牛云的token，编写相应的api路由，

php artisan make:controller /Admin/QiniuController

查看路由可以看到我们的路由已经建立好了

image.png

2.3打开QiniuController编写我们的控制器

uploadToken($bucket, null, $expires, $policy, true);
        return ['token'=>$upToken];
    }
}

访问地址已经可以拿到token了

image.png

3.准备你要上传表单页面，并编写对应的js(以下代码仅截取片段)

前台表单页面html

    栏目缩略图
    

    上传图片
    

    
    

    

对应的js上传部分

upload.render({
        elem: '#topicImg',
        url: 'http://upload-z2.qiniup.com',
        size: 500 //限制文件大小，单位 KB
        ,before: function(obj){
        //预读本地文件示例，不支持ie8
        obj.preview(function(index, file, result){
            $('#prevImg').attr('src', result); //图片链接（base64）
        });
        },
        done: function(res) {
            $('#photoInp').attr('value', res.key);
        },
        error: function(){
        //演示失败状态，并实现重传
        var demoText = $('#demoText');
        demoText.html('上传失败 重试');
        demoText.find('.demo-reload').on('click', function(){
            uploadInst.upload();
        });
        },
        data: {
            token: function(){
                var token;
                $.ajax({
                    async:false,//ajax 非异步获取taken
                    type: 'get',
                    url: '/api/qiniutoken',
                    success: function (res) {
                        token = res.token;
                    }
                });
                return token;
            }
        }
    });

当我们拿到隐藏的key后拼接上我们的图片上传域名就能直接使用了。
当然我们想自定义文件名时，date追加额外的字段key 例如data:{token:token,key:'201905100212.png'}即可！
至此图片上传基本完成，大家可以类似的举一反三自行测试！！！