打算用laysns这个cms修改一下, 弄一个网址收录大全。以前弄过一个,也是使用thinkphp框架开发的,但是过于简洁, 所以这次选择了laysns这个cms试一下。
整体还是比较简单的 ,前台已经差不多了,现在就是再修改后台,因为程序整体趋向于导航网站,所以后台新建一个方法进行存储网址信息,模板直接在后台复制的。
整体看了一下,原本layui的按钮是上传图片到网站本地的,我主要做的就是修改到第三方的api,图片不放在网站本地,而是全部通过lskypro这个程序放在又拍云上。
功能已经完成,可以完美实现了,所以此文章做一个分享,也算是备份。
首先,必须要参考的网址: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或者又拍云存储上,这一点随心。
比如我: