20200129-Layui文件上传-PHP线上培训九期班

Layui文件上传

一、前端代码

<section class="Hui-article-box">
        <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页
            <span class="c-gray en">&gt;</span>
            图片管理
            <span class="c-gray en">&gt;</span>
            图片列表
            <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>
        </nav>
        <div class="Hui-log">
            @csrf
            <div class="cl pd-5 bg-1 bk-gray mt-20" style="margin: 80px 100px">
                <span class="l">
                <button **id="up"** class="btn btn-primary radius" ><i class="Hui-iconfont">&#xe600;</i> 选择文件</button>
                <button onclick="model_download()" class="btn btn-primary radius" ><i class="Hui-iconfont">&#xe600;</i> 下载模板</button>
                </span>
            </div>
        </div>
    </section>

二、JS脚本

<script type="text/javascript" src="/static/layui/layui.all.js"></script>
<script type="text/javascript" src="/static/layui/layui.js"></script>
<script type="text/javascript">
layui.use(‘upload’, function() {
var $ = layui.jquery;
var upload = layui.upload;
upload.render({
elem: ‘#up’
, url: ‘/test/uploadsave’
, data: {
‘_token’: function () {
return $(‘input[name=”_token”]’).val();
}
}
, accept: ‘file’ //普通文件
, done: function (res) {
if (res.code == 0) {
for (var i = 0; i < res.data.length; i++) {
$(“#log”).append(‘<div>‘ + res.data[i] + ‘</div>‘);
}
}
}
});
})

三、遇到的问题

1、无法选择上传文件，提示错误是upload.render未定义

反复查询，最后问题的解决还是在百度上看到，一位博主说是引入layui.js版本问题，果断换成最新版本，并将layui.all.js也一块引入，这个问题才得到解决。

2、错误代码419问题

代码419是_token没有上传，可是怎么传，根据文档和自己掌握的知识，这个问题这样解决了

, data: {
                    '_token': function () {
                        return $('input[name="_token"]').val();
                    }
                }