图片tp layui上传

最新推荐文章于 2022-06-15 14:42:28 发布

忆2009

最新推荐文章于 2022-06-15 14:42:28 发布

阅读量157

点赞数

本文链接：https://blog.csdn.net/weixin_45822986/article/details/108841861

版权

前端代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>添加页面</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
<fieldset class="layui-elem-field">
    <legend>图片添加</legend>
    <div class="layui-field-box">
        <form class="layui-form" action="photoadd" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-block">
                    <input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">选择框</label>
                <div class="layui-input-block">
                    <select name="types" lay-verify="required">
                        <option value="1">人物</option>
                        <option value="2">风景</option>
                        <option value="3">动物</option>
                    </select>
                </div>
            </div>

            <div class="layui-upload">
                <button type="button" class="layui-btn" id="test1">上传图片</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="demo1" style="width: 200px">
                    <p id="demoText"></p>
                </div>
            </div>
            <input type="hidden" name="img" id="img" value="" >
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</fieldset>

<script src="/static/layui/layui.js"></script>
<script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form','upload'], function () {
        var layer = layui.layer
            ,$ = layui.jquery
            ,upload = layui.upload
            , form = layui.form;

        // layer.msg('Hello World');

        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '/photoimg' //改成您自己的上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                console.log(res)
                $('#img').val(res.datas)
                //上传成功
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

    });

</script>
</body>
</html>

后台代码

<?php

namespace app\album\controller;

use app\album\model\Albumm;
use app\common\Alyunoss;
use think\Controller;
use think\Request;

class Albumc extends Controller
{
    /**
     * 显示资源列表
     *
     * @return \think\Response
     */
    public function index(Albumm $albumm)
    {

        if (!empty($this->request->types)){
            $arr['type']=$this->request->types;
            $data=$albumm->where($arr)->paginate(1,false,['query'=>request()->param()]);
        }else{
            $data=$albumm->paginate(1);
        }
        return view('album/albumlist',['data'=>$data]);
    }

    /**
     * 显示创建资源表单页.
     *
     * @return \think\Response
     */
    public function create(Request $request)
    {

        $file = request()->file('file');
        // 移动到框架应用根目录/public/uploads/ 目录下
        $info = $file->getInfo('tmp_name');
        $arr = [];
        if ($info) {

            $fileName =$file->getInfo()['name'];
            $oss=new Alyunoss();
            $oss->uploadFile('1803a', $fileName, $info);
            $url_img='https://1803a.oss-cn-beijing.aliyuncs.com/'.$fileName;
            return json(['code' => 0, 'mag' => '成功','img'=>$url_img]);

        } else {

            return json(['code' => 1, 'mag' => '失败','img'=>'']);
        }
    }

    /**
     * 保存新建的资源
     *
     * @param  \think\Request  $request
     * @return \think\Response
     */
    public function save(Request $request)
    {
        $arr['title']=$request->title;
        $arr['img']=$request->img;
        $arr['uid']=$request->uid;
        $arr['type']=$request->types;
//        return $arr['type'];
        $arr['plnum']=999;
        $arr['created_at']=date('Y-m-d h:i:s', time());
        $album=new Albumm();
        $re=$album->insert($arr);
        if ($re){
//            $this->success('新增成功', '/albumlist');
            return redirect('/albumacz');
        }else{
            return 'no';
        }

    }

    /**
     * 显示指定的资源
     *
     * @param  int  $id
     * @return \think\Response
     */
    public function read($id)
    {
        //
    }

    /**
     * 显示编辑资源表单页.
     *
     * @param  int  $id
     * @return \think\Response
     */
    public function edit($id)
    {
        //
    }

    /**
     * 保存更新的资源
     *
     * @param  \think\Request  $request
     * @param  int  $id
     * @return \think\Response
     */
    public function update(Request $request, $id)
    {
        //
    }

    /**
     * 删除指定资源
     *
     * @param  int  $id
     * @return \think\Response
     */
    public function delete($id)
    {
        //
    }
}

忆2009

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片tp layui上传

<?phpnamespace app\album\controller;use app\album\model\Albumm;use app\common\Alyunoss;use think\Controller;use think\Request;class Albumc extends Controller{ /** * 显示资源列表 * * @return \think\Response */ public funct
复制链接

扫一扫