1. 源码
定义一个img_list数组,然后把每次上传的图片的地址保存起来,然后最后一次性显示即可
<script> layui.use(['layedit','upload'], function(){ var layedit = layui.layedit, upload = layui.upload; layedit.set({ uploadImage: { url: "{:url('subject/upload')}" //接口url ,type: 'post' //默认post } }); //建立编辑器 layedit.build('vod_content',{ height:500 }); var img_list = []; upload.render({ elem: '.layui-upload' ,url: "{:url('upload/uploadOne')}" ,method: 'post' ,multiple: true ,done :function (res) { if(res.code != 1){ layer.msg(res.data); return false; } img_list.push(res.data); var obj = this.item; var input = $(obj).parent().parent().find('.upload-input'); input.val(img_list); layer.msg('图片上传成功,鼠标移入框内即可查看'); } }); $('.upload-input').hover(function (e){ var e = window.event || e; var imgsrc = $(this).val(); if(imgsrc.trim()==""){ return; } var left = e.clientX+document.body.scrollLeft+20; var top = e.clientY+document.body.scrollTop+20; $(".showpic").css({left:left,top:top,display:""}); if(imgsrc.indexOf('://')<0){ imgsrc = imgsrc; } $(".showpic_img").attr("src", imgsrc); },function (e){ $(".showpic").css("display","none"); }); }); </script>
2. 服务端代码
<?php namespace app\admin\controller; use Qiniu\Auth; use Qiniu\Storage\UploadManager; class Upload extends Base { protected $domain; protected $bucket; protected $token; const ACCESS_KEY = ''; //七牛参数 自己去找吧 const SECRET_KEY = ''; //七牛参数 自己去找吧 public function initialize() { $this->domain = 'https://'.'fangkang.top'.'/'; $this->bucket = ''; $auth = new Auth(self::ACCESS_KEY, self::SECRET_KEY); // 生成上传Token $this->token = $auth->uploadToken($this->bucket); } /** * 上传 * @param array $file 图片参数 * @return array */ public function uploadOne() { $data = $this->request->file(); $info = $data['file']->getInfo(); // 构建 UploadManager 对象 $uploadMgr = new UploadManager(); list($ret, $err) = $uploadMgr->putFile($this->token, "banner/".$info['name'], $info['tmp_name']); if ($err !== null) { return ['err' => 0, 'data' => '上传失败']; } else { //返回图片的完整URL return ['code' => 1, 'msg' => '上传完成', 'data' => ($this->domain . $ret['key'])]; } } }