记录一下layui整合上传图片到LskyPro接口API

2021-05-07
418次阅读
5条评论

打算用laysns这个cms修改一下, 弄一个网址收录大全。以前弄过一个,也是使用thinkphp框架开发的,但是过于简洁, 所以这次选择了laysns这个cms试一下。

整体还是比较简单的 ,前台已经差不多了,现在就是再修改后台,因为程序整体趋向于导航网站,所以后台新建一个方法进行存储网址信息,模板直接在后台复制的。

整体看了一下,原本layui的按钮是上传图片到网站本地的,我主要做的就是修改到第三方的api,图片不放在网站本地,而是全部通过lskypro这个程序放在又拍云上。

功能已经完成,可以完美实现了,所以此文章做一个分享,也算是备份。

记录一下layui整合上传图片到LskyPro接口API

首先,必须要参考的网址:https://www.layui.com/doc/modules/upload.html  ,因为程序使用的layui前端框架,我直接在原来的代码上修改实现。有精力的可以使用jquery框架,也能实现。

upload.render({
        elem: '#image',
        url: "https://pic.mxooo.cn/api/upload",
        before: function(obj) {
            obj.preview(function(index, file, result) {
                $('#picshow').attr('src', result);
            });
        },
        done: function(res) {  //上传后的回调
            if (res.code == '200') {
                $('#coverpic').val(res.data.url);
                return layer.msg('上传成功');
            } else {
                return layer.msg(res.msg);
            }

        },
        accept: 'image',
        acceptMime: 'image/*',
        exts: 'jpg|png|gif|bmp|jpeg',
        size: '10240',
        data:{token:'aduioasuduwahdiuaghduiawa'},
    });

上面这段代码就是我已经实现的完整代码,layui上传最主要的就是upload.render这个方式,当然,原来的代码已经定义了upload这个方法。

其他的先不说了,本代码对接的接口是lskypro这个图传程序,建议自己下载源码搭建一个,开放接口对接就行了。

修改的代码就是上面这个,需要可以按照我的这个来修改,前提是你的程序也是使用layui框架,否则还是用ajax吧。

需要注意的是,不仅仅需要在layui提交上做修改,还需要在lskypro上修改。

需要修改的地方为:

①:

application/index/controller/Upload.php  这个文件,找到

public function initialize()
    {
        // 是否允许游客上传
        $token = $this->request->header('token');
        if (!$this->config['allowed_tourist_upload']) {
            $token && $this->auth($token);
        } else {
            $this->auth($token);
        }
    }

修改为

public function initialize()
    {
        // 是否允许游客上传
        $token = $this->request->post('token');
        if (!$this->config['allowed_tourist_upload']) {
            $token && $this->auth($token);
        } else {
            $this->auth($token);
        }
    }

为啥要修改?因为我只需要携带参数,而且上面的提交代码使用的是data,使用layui的方法加载headers参数测试的时候失败了,找不到原因。考虑了一下,因为我这个是后台上传,参数直接写死就行。

前台上传一定不能写死参数,前台使用还是提前请求验证端口进行获取token再上传吧。

②:

application/index/controller/Upload.php 这个文件,找到 getImage() 这个方法,把下面的

$image = $this->request->file('image');

修改为:

$image = $this->request->file('file');

因为,layui默认上传的格式为file,包括所有的html方式上传基本都是file文件格式,但是可以手动修改为image,因为我后期还有其他的地方需要对接到这边,所以索性直接改成file。

③:

咱们上一步修改的就是file格式,那么如果这边修改了程序,则lskyPro首页上传则会出错,同时需要修改文件

application/index/view/index/index.html 这个文件,需要把上传的 input 标签属性修改为file,lskypro默认的是image。

例如:

<input id="image" style="display: none;" type="file" multiple name="file">

到这里,我们就已经全部修改完成了,现在就能完美的上传到第三方了,至于图片,我们可以在lskypro后台选择对应的用户选择是放在第三方本地还是放在腾讯云cos或者又拍云存储上,这一点随心。

比如我:

记录一下layui整合上传图片到LskyPro接口API

正文结束
居烽
版权声明:本站原创文章,由 居烽 于2021-05-07发表,共计2129字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(5条评论)
验证码
2023-05-22 19:08:14 回复

博主你好,请问现在layui想实现和又拍云的对接还是使用本篇文章的方法吗?

 Windows  Edge  中国浙江省杭州市移动
    2023-05-23 05:27:25 回复

    @moxne layui只是一个js库,前端ajax上传而已。对接任何写法都行。

     Windows  Edge
2023-05-22 19:08:29 回复

或者说有没有能不通过图床中转直接在layui中实现上传又拍云的方法呢,因为目前我安装最新的兰空图床发现找不到本篇文章中需要修改的兰空相关文件,望回复,谢谢

 Windows  Edge  中国浙江省杭州市移动
    2023-05-23 05:25:25 回复

    @moxne 没研究过html直接对接upyun存储,但我这教程使用的是lskypro 1.6版本的。

     Windows  Edge
    2023-05-23 05:28:40 回复

    @moxne 文章中使用的是lsky pro 1.6版本,新版的我没研究过。

     Windows  Edge