php中文网最新课程

每日17点准时技术干货分享

本文为php中文网认证作者:“wpj”投稿,欢迎加入php中文网有偿投稿计划!

本文实例讲述了封装ThinkPHP6通用文件上传方法,上传功能使用的是LayUI的upload组件。

封装ThinkPHP6.0通用文件上传教程

一、打开项目在config文件夹下创建upload.php配置文件用来管理文件上传的后缀和大小

<?php return [    //定义允许上传文件后缀的数组    'suffix_arr'    =>  [        //允许图片上传的后缀        'image'     =>  'jpg,jpeg,png,gif',        //允许上传文件的后缀        'file'      =>  'zip,gz,doc,txt,pdf,xls',        //...    ],    //定义允许上传文件大小的数组    'size_arr'      =>  [        //允许图片上传的大小        'image'     =>  10,        //允许文件上传的大小        'file'      =>  50    ],];

二、修改config\filesystem.php配置文件配置上传根目录及上传规则

<?php return [    // 默认磁盘    'default' => env('filesystem.driver', 'local'),    // 磁盘列表    'disks'   => [        'local'  => [            'type' => 'local',            'root' => app()->getRuntimePath() . 'storage',        ],        'public' => [            // 磁盘类型            'type'       => 'local',            // 磁盘路径            'root'       => app()->getRootPath() . 'public/uploads',            // 磁盘路径对应的外部URL路径            'url'        => '/uploads',            // 可见性            'visibility' => 'public',        ],       // 更多的磁盘配置信息    ],];

三、 在app\controller目录下创建Upload.php类并编写upload()文件上传方法

<?php namespace app\controller;use think\exception\ValidateException;class Upload{    //上传    public function upload(){        //判断是否是POST请求,如果是处理上传逻辑        if (request()->isPost()){            //接收文件上传类型            $type = request()->param('type','','trim');            $name = request()->param('name','','trim');            //获取表单上传文件            $file = request()->file('file');            //组装文件保存目录            $upload_dir = '/'.$type.'/'.$name;            try {                //从config/upload.php配置文件中读取允许上传的文件后缀和大小                $suffix_config = config('upload.suffix_arr');                $size_config = config('upload.size_arr');                if (empty($size_config[$type]) || empty($size_config[$type])){                    return false;                }else{                    $suffix = $suffix_config[$type];                    $size = $size_config[$type];                }                //验证器验证上传的文件                validate(['file'=>[                    //限制文件大小                    'fileSize'      =>  $size * 1024 * 1024,                    //限制文件后缀                    'fileExt'       =>  $suffix                ]],[                    'file.fileSize' =>  '上传的文件大小不能超过'.$size.'M',                    'file.fileExt'  =>  '请上传后缀为:'.$suffix.'的文件'                ])->check(['file'=>$file]);                //上传文件到本地服务器                $filename = \think\facade\Filesystem::disk('public')->putFile($upload_dir, $file);                if ($filename){                    $src = '/uploads/'.$filename;                    return json(['code'=>1,'result'=>$src]);                }else{                    return json(['code'=>0,'msg'=>'上传失败']);                }            }catch (ValidateException $e){                return json(['code'=>0,'msg'=>$e->getMessage()]);            }        }else{            return json(['code'=>0,'msg'=>'非法请求']);        }    }}

四、 打开app\controller\Index.php类并修改index方法

<?php namespace app\controller;use app\BaseController;class Index extends BaseController{    public function index(){        //渲染前端页面        return view();    }}

五、在app\view\index目录下创建index.html文件

        文件上传                    #avatar_thumb {            position: absolute;            left: 50%;top: 50%;            width: 168px;            height: 168px;            margin: -50px 0 0 -84px;            border-radius: 100%;        }
上传头像

layui.use(['form', 'upload'], function() { var upload = layui.upload; //图片上传 common_upload('avatar'); //文件上传 //common_upload('avatar','file'); });

六、在public\static\lib\js目录下创建common.js

/** * @desc 通用文件上传 * @param name  文件存储文件夹 * @param type 文件类型:默认为图片类型(image) */function common_upload(name,type='image') {    layui.use(['form', 'upload'], function() {        var upload = layui.upload;        //选完文件后自动上传        upload.render({            elem: '#'+name,            url: "/upload/upload",            auto: true,            accept: 'file', //普通文件            data:{name:name,type:type},            done: function(data) {                console.log(data);                //上传完毕回调                if (data.code == 0) {                    return layer.msg(data.msg,{icon:2});                } else {                    $("#"+name+"_thumb").attr('src',data.result).show();                    $('input[name='+name+']').val(data.result);                }            }        });    });}

七、测试图片上传

7.1、为了方便,本文就不在本地部署项目了,采用ThinkPHP内置的服务器

进到项目根目录,执行以下命令:

php think run

7.2、在浏览器地址栏中输入访问地址,发现报错?

7.3、遇到错误不要慌,我们打开ThinkPHP的调试功能,看看具体错误信息

7.4、通过开启调试模式,发现报错原因是我们没有安装模板引擎,在ThinkPHP6.0中默认只能支持PHP原生模板,如果需要使用thinkTemplate模板引擎,需要安装think-view扩展

7.5、进到项目根目录下,输入以下命令进行安装think-view模板

composer require topthink/think-view

7.6、再次访问,访问成功。不过图片显示的是破裂的,如果觉得不好看,小伙伴们可以自行设置一个默认图片。

7.7、测试图片上传。从GIF图中可以看出上传图片大小和后缀不符合配置文件中设置的值,会给出相应的提示信息,只有上传符合配置文件中设置的值的图片才会在页面中显示并存储到本地。

7.8、如果需要上传文件,视频或音频,只需要修改以下两个地方,这里就不演示了,小伙伴们下去自己试下。

八、新图片上传成功后自动删除原图,有效地减少垃圾信息的累积

8.1、在app\controller\Upload.php中添加delImg() 方法

<?php  namespace app\controller; use think\exception\ValidateException; class Upload{    //上传    public function upload(){        //判断是否是POST请求,如果是处理上传逻辑        if (request()->isPost()){             //接收文件上传类型            $type = request()->param('type','','trim');            $name = request()->param('name','','trim');            //获取表单上传文件            $file = request()->file('file');            //组装文件保存目录            $upload_dir = '/'.$type.'/'.$name;             try {                //从config/upload.php配置文件中读取允许上传的文件后缀和大小                $suffix_config = config('upload.suffix_arr');                $size_config = config('upload.size_arr');                 if (empty($size_config[$type]) || empty($size_config[$type])){                    return false;                }else{                    $suffix = $suffix_config[$type];                    $size = $size_config[$type];                }                //验证器验证上传的文件                validate(['file'=>[                    //限制文件大小                    'fileSize'      =>  $size * 1024 * 1024,                    //限制文件后缀                    'fileExt'       =>  $suffix                ]],[                    'file.fileSize' =>  '上传的文件大小不能超过'.$size.'M',                    'file.fileExt'  =>  '请上传后缀为:'.$suffix.'的文件'                ])->check(['file'=>$file]);                 //上传文件到本地服务器                $filename = \think\facade\Filesystem::disk('public')->putFile($upload_dir, $file);                if ($filename){                    $src = '/uploads/'.$filename;                    return json(['code'=>1,'result'=>$src]);                }else{                    return json(['code'=>0,'msg'=>'上传失败']);                }            }catch (ValidateException $e){                return json(['code'=>0,'msg'=>$e->getMessage()]);            }        }else{            return json(['code'=>0,'msg'=>'非法请求']);        }    }     //删除旧图片    public function delImg(){        if (request()->isPost() && request()->isAjax()){            //获取旧图片地址            $img_url = input('img_url','','trim');            //如果旧图片地址为系统默认图片地址直接返回true; 这里的系统默认地址小伙伴可以自行设置            if($img_url == '/uploads/image/avatar/default/user_avatar.jpg'){                return true;            }            //ROOT_PATH常量建议定义在入口文件index.php或中间件中,这里为了演示方便就先定义在这里。            define('ROOT_PATH',dirname(str_replace("\\",'/',$_SERVER['SCRIPT_FILENAME']))."/");            //如果接收的图片地址不为空,循环删除            if (!empty($img_url)){                $old_image = array(ROOT_PATH.$img_url);                foreach ($old_image as $img){                    if (file_exists($img)){                        @unlink($img);                    }                }            }            return json(['code'=>1,'msg'=>'图片删除成功']);        }else{            return json(['code'=>0,'msg'=>'图片删除失败']);        }    }}

8.2、在common.js中的common_upload()方法中定义before()

/** * @desc 通用文件上传 * @param name  文件存储文件夹 * @param type 文件类型:默认为图片类型(image) */function common_upload(name,type='image') {     layui.use(['form', 'upload'], function() {        var upload = layui.upload;         //选完文件后自动上传        upload.render({            elem: '#'+name,            url: "/upload/upload",            auto: true,            accept: 'file', //普通文件            data:{name:name,type:type},             before: function(obj) {                var img_url = $('input[name='+name+']').val();                // 删除老数据                if (img_url != '') {                    $.ajax({                        url: "/upload/delImg",                        type: 'POST',                        data: {                            img_url: img_url                        },                    });                }            },             done: function(data) {                console.log(data);                //上传完毕回调                if (data.code == 0) {                    return layer.msg(data.msg,{icon:2});                } else {                    $("#"+name+"_thumb").attr('src',data.result).show();                    $('input[name='+name+']').val(data.result);                }            }        });    });}

data后缀文件解码_封装ThinkPHP6.0通用文件上传相关推荐

  1. .git文件夹_如何使用git把本地代码上传(更新)到github上

    什么是git?git是一个开源的分布式版本控制系统,可以有效.高速地处理从很小到非常大的项目版本管理.git是一种工具,它能更好的让我们管理代码.很多时候如果我们需要保持本地代码和github代码版本 ...

  2. axios 上传文件 封装_axios 封装【满足常规数据上传及file上传】

    axios 封装[满足常规数据上传及file上传] request.js /* 封装axios */ const axios = require('axios'); import { featchAp ...

  3. 学习日志day41(2021-09-03)(1、文件的上传 2、文件的查看 3、文件的下载 4、使用工具类上传文件 5、基于servlet3.0以上的文件上传 )

    学习内容:学习JavaWeb(Day41) 1.文件的上传 2.文件的查看 3.文件的下载 4.使用工具类上传文件 5.基于servlet3.0以上的文件上传 1.文件的上传 (1)实现文件的上传需要 ...

  4. java web 断点上传_使用WebUploader实现分片断点上传文件功能(二)

    写在前面: 这几天,有去研究一下WebUploader上传文件,前面的博客有记录下使用WebUploader简单上传文件的例子,今天就把分片断点上传的例子也记录下吧,在博客园中,也查看了一些资料,基本 ...

  5. Spring MVC-09循序渐进之文件上传(基于Servlet3.0+Html5客户端上传文件)

    示例 测试 源码 虽然Servlet3.0+中上传文件,我们在服务端编程即可非常容易,但是用户体验却不是非常友好.单独的一个HTML表单并不能显示进度条,或者显示已经成功上传的文件数量. 不管是Jav ...

  6. bootstrap-fileinput上传文件的插件使用总结----编辑已成功上传过的图片

    http://plugins.krajee.com/file-plugin-methods-demo 具体操作 http://plugins.krajee.com/file-preview-manag ...

  7. 多组input文件,每组 multiple选择多张图片上传可增删其中任意一张图片,用formData对象实现;(ajax做异步,自己做延时同步)

    input .multiple选择多张图片时,需要删除其中的一张图片怎么做,大家都知道 input 中的文件是不能删除和更改的,只能清空,这里我的做法是 定义一个对象储存器把需要的文件存在储存器中 f ...

  8. vue上传文件到php,vue+axios+php如何实现上传文件功能?,formdata上传文件附加参数...

    vue+axios+php如何实现上传文件功能?Vue Axios PHP如何实现上传文件的功能?, 推荐:<PHP视频教程> 当我们提交表单时,我们经常会遇到一些表单提交要求.vue的a ...

  9. 封装直传阿里云存储文件上传控件

    本文目标 封装一个直传阿里云OSS云存储图片上传控件 控件效果图 上传之前 上传成功 预览图片 文件上传前后台及阿里云存储数据流转过程 1.前端先访问后台接口获取上传阿里云存储权限相关信息和文件编号信 ...

最新文章

  1. 娓娓道来!那些BERT模型压缩方法
  2. ElasticSearch,Sphinx,Lucene,Solr,Xapian。哪种适合哪种用途? [关闭]
  3. linux centos 查看桌面环境
  4. WildFly 报错 java.lang.NoClassDefFoundError
  5. java后ping不是内部_ping不是内部或外部命令,也不是可运行的程序解决方案
  6. Bind 9.5安装入门指南
  7. 【ElasticSearch】使用Docker安装ElasticSearch、基本增删改查使用
  8. Android之屏幕旋转之后当前activity被finish了依然被拉起来
  9. Linux必懂知识大总结(下)
  10. 【计算机组成原理】控制器
  11. 基于dijsktra算法的最短路径求解_基于dijkstra算法的AGV路径规划(含C++代码)
  12. iptables time 时间匹配规则
  13. Unity 动态鼠标切换
  14. Linux之ubuntu离线安装软件包
  15. Python简单爬虫(以爬取豆瓣高分图书为例)
  16. AR、MA、ARMA和ARIMA模型------时间序列预测
  17. OpenGL API - 笔记汇总
  18. pytorch中的MSELoss函数
  19. 微信小程序 - 入门篇
  20. Uniapp URL地址栏获取指定参数

热门文章

  1. AES加密_ js与C#互通
  2. 高通与华为短暂和解,理智看待国内5G现状
  3. # 关于“态势感知”产品活动体验
  4. Darwin Streaming Server服务器mp4文件点播返回”415 Unsupported Media Type“错误
  5. Ruby 2.5.0概览
  6. Linux发行分支时间轴
  7. Delphi-网络编程-UDP聊天程序(转)
  8. NHibernate之Mapping 之 Property
  9. 你用什么态度去看待世界,你就会得到什么样的世界
  10. 博客园计划增加的功能