首页 > 其他分享 >laravel + layui 图片上传

laravel + layui 图片上传

时间:2022-12-29 11:57:51浏览次数:27  
标签:laravel function layui upload file demoText 上传

1.前端HTML代码

<div class="layui-form-item">
    <label class="layui-form-label">修改头像</label>
    <div class="layui-input-inline uploadHeadImage">
        <div class="layui-upload-drag" id="headImg">
            <i class="layui-icon"></i>
            <p>点击上传图片,或将图片拖拽到此处</p>
        </div>
    </div>
    <div class="layui-input-inline">
        <div class="layui-upload-list">
            <img class="layui-upload-img headImage" src="" id="demo1">
            <p id="demoText"></p>
        </div>
    </div>
</div>

2.前端js代码

<script>layui.use(['form', 'layer','upload',"element"],
    function() {
        $ = layui.jquery;
        var form = layui.form,
            upload = layui.upload,
            layer = layui.layer;
        //拖拽上传
        var uploadInst = upload.render({
            elem: '#headImg'
            , url: '{:url("uploadImg")}'
            , size: 500
            , before: function (obj) {
                //预读本地文件示例,不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接(base64)
                });
            }
            , done: function (res) {
                console.log(res);
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                var demoText = $('#demoText');
                // demoText.html('<span style="color: #8f8f8f;">上传成功!!!</span>');
                $("#imagepath").val(res.image)
                layer.msg("上传成功")
            }
            , error: function () {
                //演示失败状态,并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
        element.init();
});

3.后台PHP代码

 $uid = Session::get("member_id");
            $extension = $request->file('file')->extension(); // 上传文件扩展名
            $time = time();
            $path = $request->file('file')->storeAs('avatars', "$time.$extension");//上传图片
            $url = "/uploads/".$path;
            DB::table("users")->where(['uid'=>$uid])->update(['users_img'=>$url]);
            return response()->json(['code'=>0,'img'=>$url]);

4.laravel 默认上传图片的地址没有默认在public里面 需要修改配置文件

4.1默认图片上传地址

 

 

此时的文件不能直接访问,修改配置文件

 

 再次上传

 

 

$extension = $request->file('avatar')->extension(); // 上传文件扩展名
$name = $request->file('avatar')->getClientOriginalName();// 获取原始文件名

标签:laravel,function,layui,upload,file,demoText,上传
From: https://www.cnblogs.com/junwuxiao/p/17012107.html

相关文章

  • SiteFactory支持Word图片上传
    ​ 自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了。一般情况下我们将Word内容粘贴到Web编辑......
  • 将代码上传到码云上
    第一步:建立本地git仓库 cd到你的本地项目根目录下,执行git命令 git init第二步:将本地项目工作区的所有文件添加到暂存区 git add. .表示......
  • Web 批量大文件上传下载
    ​ 文件上传是一个老生常谈的话题了,在文件相对比较小的情况下,可以直接把文件转化为字节流上传到服务器,但在文件比较大的情况下,用普通的方式进行上传,这可不是一个好的办法......
  • layui table 动态生成复杂表头 及 数据绑定问题
    table复杂表头 下面将是我们要实现的效果下面是后台返回的数据    复杂表头重要的属性:rowspancolspan需要注意的是循环生成表头时,循环时不会执行templet里......
  • laravel 构造器clone
    这种写法有一个注意事项,一旦你在$query上调用where等约束方法,就会改变此query,有时候我们需要提前clone一个query。举例说明,比如我们同时要拿到type为1和2的users$q......
  • c# 批量大文件上传下载
    ​ 1 背景用户本地有一份txt或者csv文件,无论是从业务数据库导出、还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工、挖掘和共创应用的时候,首先要将本地文......
  • layui自定义列表文件超链接
    <scripttype="text/html"id="operator_bar_files">{{#layui.each(d.files,function(index,item){}}{{#if(index<=1){}}<ahref="{{window.fil......
  • .net 批量大文件上传下载
    ​IE的自带下载功能中没有断点续传功能,要实现断点续传功能,需要用到HTTP协议中鲜为人知的几个响应头和请求头。 一. 两个必要响应头Accept-Ranges、ETag      ......
  • asp.net 批量大文件上传下载
    ​ 以ASP.NETCoreWebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API,包括文件的上传和下载。 准备文件上传的API #region 文件上传......
  • php 批量大文件上传下载
    ​PHP用超级全局变量数组$_FILES来记录文件上传相关信息的。1.file_uploads=on/off 是否允许通过http方式上传文件2.max_execution_time=30 允许脚本最大执行时间......