ThinkPHP5框架：Layui 下 image、video、excel 文件的上传实现

泥豆芽儿 MT

发布于 2020-05-25 16:58:11

1.5K0

发布于 2020-05-25 16:58:11

文章被收录于专栏：木头编程 - moTzxx 木头编程 - moTzxx木头编程 - moTzxx

背景前段时间因为业务需求，涉及到了多种文件的上传操作；其中，包含 图片、Excel文件、视频文件 比如：我需要进行 excel 表格文件的上传，然后读取其中的数据写入数据库那么，至少要限制一下上传文件的类型在此，进行整理一番，欢迎指摘 …
环境

- 前端框架：Layui 2.5.4
- 使用框架：ThinkPHP 5.1.2   
- 文件类型：image、excel、video

前端配置

前提自然是先要对 layui 前端框架的正确引用，个人使用的版本是：2.5.4

<link href="__LAYUI__/css/layui.css" rel="stylesheet">
<!--采用模块化方式-->
<script type="text/javascript" src="__LAYUI__/layui.js"></script>
<!-- jQuery (necessary JavaScript plugins) -->
<script type='text/javascript' src="__LAYUI__/jquery-3.2.1.min.js"></script>

☛. 图片文件的上传操作

首先，是 html 页面的标签布局设计

		<div class="layui-upload layui-input-inline">
            <button type="button" name="img_upload" class="layui-btn btn_upload_img">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
            <img class="layui-upload-img img-upload-preview-medium img-upload-view"
                 src="">
            <input type="hidden" name="cover_url" class="menu-icon" value="">
        </div>

其次是对应的 js 代码的设计

layui.use(['layer','upload'], function () {
var upload = layui.upload;
        //指定允许上传的文件类型
          upload.render({
            elem: '.btn_upload_img'
            , type: 'images'
            , exts: 'jpg|png|gif|jpeg' //设置一些后缀，用于演示前端验证和后端的验证
            , url: '/api/upload/img_file' //TODO 此为服务端上传接口
            , data: {'_token': tag_token}
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('.img-upload-view').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                 layer.msg(res.message);
                //如果上传成功
                if (res.status == 1) {
                    $('.menu-icon').val(res.data.url);
                }
            }
            , error: function () {
                //演示失败状态，并实现重传
                return layer.msg('上传失败,请重新上传');
            }
        });
    });

服务端对应的上传接口代码参考如下：

	/**
     * 单一图片的上传操作
     * @param Request $request
     */
    public function img_file(Request $request)
    {
        $status = 0;
        $data = [];
        if ($request->Method()== 'POST') {
            $file = $request->file('file');
            // 移动到框架应用根目录/upload/ 目录下
            $info = $file->move('upload');
            if ($info){
                //把反斜杠(\)替换成斜杠(/) 因为在windows下上传路是反斜杠径
                $getSaveName = str_replace("\\", "/", $info->getSaveName());
                $fileUrl = '/upload/' . $getSaveName;
                $data['url'] = $fileUrl;
                $message = '上传成功';
            }else{
                $message = "上传失败 ".$file->getError();
            }
        } else {
            $message = "参数错误";
        }
        return showMsg($status, $message,$data);
    }

参考截图：

☛. Excel文件的上传操作

首先，便是页面标签的布局

<button type="button" 
		class="layui-btn" id="uploadExcel">
		<i class="layui-icon">&#xe67c;</i>上传物流订单
</button>

然后，需要对 js 的代码进行配置

layui.use(['layer','upload'], function () {
var upload = layui.upload;
        //指定允许上传的文件类型
        upload.render({
            elem: '#uploadExcel'
            ,url: '/api/upload/file_excel' //此处为所上传的请求路径
            ,accept: 'file' //普通文件
            ,exts: 'xls|excel|xlsx' //只允许上传压缩文件
            ,done: function(res){
                console.log(res)
                layer.msg(res.message);
            }
        });
    });

接下来，便是对所获取的 excel文件的解析处理，以我的 ThinkPHP5.1.2 处理代码为例

    /**
     * 进行excel文件的上传读取操作
     * @param Request $request
     */
    public function file_excel(Request $request){
        $status = 0;
        if ($request->Method() == 'POST') {
            $file = $request->file('file');
            // 移动到框架应用根目录/upload/ 目录下
            $info = $file->move('upload');
            if ($info) {
                //把反斜杠(\)替换成斜杠(/) 因为在windows下上传路是反斜杠径
                $getSaveName = str_replace("\\", "/", $info->getSaveName());
                $fileUrl = './upload/' . $getSaveName;
               //TODO 此时进行数据的解析，个人业务逻辑，此处应该修改为你自己的逻辑
                $orderModel = new XorderGoods();
                $status = 1;
                $message = $orderModel->ajaxDealExcelOrder($fileUrl);
            } else {
                $message = "上传失败 " . $file->getError();
            }
        } else {
            $message = "参数错误";
        }
        return showMsg($status, $message);
    }

后续的数据处理，请参考：【 ThinkPHP5.1 excel表的导入导出操作 (PHPExcel)】

☛. 视频文件的上传操作

为了应对大文件的上传，补充设计了，进度条展示效果

首先，是 html 页面的标签布局设计,参考如下：

    <div class="layui-form-item">
        <label class="layui-form-label">视频：</label>
        <div class="layui-upload layui-input-block">
            <button type="button" name="video_upload" class="layui-btn btn_upload_video">
                <i class="layui-icon">&#xe652;</i>上传视频
            </button>
            <br><br>
            <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="progressBar">
                <div id="progressBar" pb_loading_tag="1" class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
            </div>
            <br>
            <video class="video-upload-view" src="" controls="controls" style="display: none"></video>
            <input type="hidden" name="save_url" class="save_url" value="">
        </div>
    </div>

然后是对应的 js 代码编写

layui.use(['layer','upload','element'], function () {
		var upload = layui.upload;
        var element = layui.element;
        var loading_count = 0;
        upload.render({
            elem: '.btn_upload_video'
            ,exts: 'mp4|flv' //设置一些后缀，用于演示前端验证和后端的验证
            ,url: '/api/upload/video_file' //改成您自己的上传接口
            ,accept: 'video' //视频
            , before: function (obj) {
                loading_count = 0;
                $("#progressBar").attr('pb_loading_tag',1);
                element.progress('progressBar', '0%');
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('.video-upload-view').attr('src', result); //图片链接（base64）
                    $('.video-upload-view').show();
                });
            },
            progress: function() {
                //模拟loading
                var timer = setInterval(function(){
                    var loading = $("#progressBar").attr('pb_loading_tag');
                    if(loading == 1){
                        loading_count = loading_count + Math.random()*10|1;
                        if(loading_count>98){
                            loading_count = 98;
                        }
                    }else {
                        loading_count = 100;
                        clearInterval(timer);
                    }
                    //这里是虚拟的哦，其实就是为了能提示一下没上传完就可以了，哈哈...
                    element.progress('progressBar', loading_count+'%');
                }, 300+Math.random()*1000);

            }
            ,done: function(res){
                //如果上传成功
                if (res.status == 1) {
                    $('.save_url').val(res.data.url);
                    $("#progressBar").attr('pb_loading_tag',0);
                }
                layer.msg(res.message);
            }
        });
    });

服务端的接口，可完全借用前面提到的图片上传代码如果文件比较大，需要更改一下 php.ini 和 nginx.conf 配置文件的一些东西（可百度哦）有能力的，可以搜索数据片上传的方法，提高上传效率！
实现效果截图：

【提示】

这里的进度条上传是虚拟的哦，其实就是为了能提示一下没上传完就可以了，哈哈…

附录：

1 . showMsg 公共方法

/**
 * 公用的方法  返回json数据，进行信息的提示
 * @param $status 状态
 * @param string $message 提示信息
 * @param array $data 返回数据
 */
function showMsg($status,$message = '',$data = array()){
    $result = array(
        'status' => $status,
        'message' =>$message,
        'data' =>$data
    );
    exit(json_encode($result));
}

2 . 如果操作，上传的文件会默认保存到了 /public/upload 目录下一般而言，后期会考虑将各种文件统一使用 FTP 上传到资源服务器；届时可以对鄙人所提供的上传接口进行优化升级即可 …

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-05-22 ，如有侵权请联系 cloudcommunity@tencent.com 删除

thinkphp

html

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

thinkphp

html

登录后参与评论

0 条评论

热度

ThinkPHP5框架：Layui 下 image、video、excel 文件的上传实现

ThinkPHP5框架：Layui 下 image、video、excel 文件的上传实现

☛. 图片文件的上传操作

☛. Excel文件的上传操作

☛. 视频文件的上传操作

附录：

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐