ThinkPHP6单文件上传封装

2020-09-18   阅读:166   分类:后端    标签: TP6

我们使用ThinkPHP6框架经常需要文件上传,以下是封装的单文件上传控制器,结合layui前端框架,实现上传,只需调用该方法,传递存储文件夹名,为何要传递文件夹名呢?实则是为了方便管理文件。

image.png

1、后端控制器代码:

<?php
/**
 *公共文件上传
 * User: Hm
 * Date: 2020/9/16
 * Email: <2938039696@qq.com>
 **/
declare (strict_types = 1);
namespace app\union\controller;
use think\exception\ValidateException;
class Upload extends Base
{
    /*
     * 单文件上传
     * */
    public function uploadImg(){
        //判断是否是POST请求,如果是处理上传逻辑
        if (request()->isPost()){
            //接收文件上传目录
            $namePath = request()->param('type');
            //获取表单上传文件
            $file = request()->file('file');
            $upload_dir = '/'.$namePath; //组装文件保存目录
            $suffix='jpg,jpeg,png,gif';  //文件格式
            $size='3'; //文件大小
            try {
                //验证器验证上传的文件
                validate(['file'=>[
                    //限制文件大小
                    'fileSize'      =>  $size * 1024 * 1024,
                    //限制文件后缀
                    'fileExt'       =>  'jpg,jpeg,png,gif'
                ]],[
                    'file.fileSize' =>  '上传的文件大小不能超过'.$size.'M',
                    'file.fileExt'  =>  '请上传后缀为:'.$suffix.'的文件'
                ])->check(['file'=>$file]);
 
                    //上传文件到本地服务器
                $filename = \think\facade\Filesystem::disk('public')->putFile($upload_dir, $file);
                ;
                if ($filename){
                    $src = '/uploads/'.str_replace('\\', '/', $filename);
                    return json(['code'=>1,'msg'=>'上传成功','data'=>['src'=>$src]]);
                }else{
                    return json(['code'=>0,'msg'=>'上传失败']);
                }
 
            }catch (ValidateException $e){
                return json(['code'=>0,'msg'=>$e->getMessage()]);
            }
        }else{
            return json(['code'=>0,'msg'=>'非法请求']);
 
        }
 
 
    }
}
?>

2、前端代码:

 <div class="layui-form-item layui-form-text">
                <label>ICON</label>
                <div>
                    <div id="test10">
                        <i></i>
                        <p>点击上传,或将文件拖拽到此处</p>
                        <div id="uploadDemoView" {php}if( isset($sys_config->sys_icon) != '' ) echo  'style ="display:block !important;" ';{/php}>
                            <hr>
                            <img src="{php}if( isset($sys_config->sys_icon) != '' ) echo  $sys_config->sys_icon ;{/php}" alt="上传成功后渲染" style="max-width: 196px">
                            <input type="hidden" name="sys_icon" id="sysIcon" value="{php}if( isset($sys_config->sys_icon) != '' ) echo  $sys_config->sys_icon ;{/php}">
                        </div>
                    </div>
                </div>
            </div>

3、Javascrpt代码:这里调用改方法并传递参数{type:'config'}

<script>
    layui.use(['upload','form'], function () {
        var form = layui.form
            ,layer = layui.layer
            ,upload = layui.upload
            ,$ = layui.$;
        //拖拽上传
        upload.render({
            elem: '#test10'
            ,url: '{:url("union.upload.uploadImg")}' //改成您自己的上传接口
            ,exts:'jpg|png|gif|bmp|jpeg'
            // ,auto:false
            // // ,field:''
            // ,bindAction:'#settingFile'
            ,data:{type:'config'}
            ,done: function(res){
                layer.msg('上传成功');
                layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data.src);
                layui.$('#sysIcon').attr('value', res.data.src);
                console.log(res)
            }
        });
});
</script>


【腾讯云】11.11 云上盛惠,云产品限时抢购,1核2G云服务器首年88元

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/adetail/429.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
头像

简忆博客
仕而优则学,学而优则仕。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×