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

技术论点 86 阅读 0

打算用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

Tags:

版权声明:若无特殊注明,本文皆为《燕闻墨香博客》原创,转载务必保留文章来源。

本文链接:记录一下layui整合上传图片到LskyPro接口API & https://www.mxooo.cn/985/

推荐阅读
发表评论 取消回复
表情 图片 链接 代码

分享