TP6 layui upload 图片、文件上传

我是高手高手高高手 2020-11-27 17:57:41

224

分类专栏： thinkphp5 tp6 layui插件

最后发布:2020-11-27 17:57:41首次发布:2020-11-27 17:57:41

原文链接：https://blog.csdn.net/weixin_45285275/article/details/108800577

版权

我用的图片上传前端是用layui 图片上传下面贴代码和步骤我尽量写的详细些
1、layui 代码

<div class="layui-form-item">
	<label class="layui-form-label">上传图片</label>
		<div class="layui-input-block" id="image1">
			<img src="/static/image_icon/WechatIMG2.png" alt="" id="image2" style="height: 80px;width: 80px">
			<input type="hidden" name="image" id="image">
		</div>
</div>``

JS代码
<script>
        layui.use(['form', 'jquery', 'layer', 'upload'], function() {
            var form = layui.form,
                layer = layui.layer,
                upload = layui.upload;
            
            upload.render({
                elem: '#image1',
                url: '/upload/upload/image',
                accept: 'image',
                size: 3 * 1024,
                before: function(obj) {},
                done: function(res) {
                    if (res.status == 200) {
                        layer.msg(res.msg, {
                            icon: 1
                        })
                        $('#image2').attr('src', res.path)
                        $('#image').val(res.path)
                    } else {
                        layer.msg(res.msg, {
                            icon: 2
                        })
                    }
                }
            });
        })
    </script>

2、layui 代码
特别强调：这段代码是写在 app/upload/controller Upload.php文件（需要自己新建）
TP6 后台代码

namespace app\upload\controller;

use think\facade\Config;
use think\facade\Env;
class Upload 
{
    /**图片上传*/
    public function image()
    {
        $file = request()->file('file');
        // 移动到框架应用根目录/uploads/ 目录下
        try{
            // 验证
            validate(['imgFile'=>[
                'fileSize' => 410241024,
                'fileExt' => 'jpg,jpeg,png,bmp,gif',
                'fileMime' => 'image/jpeg,image/png,image/gif', //这个一定要加上，很重要我认为！
            ]])->check(['imgFile' => $file]);
            // 上传图片到本地服务器
            $saveName = \think\facade\Filesystem::disk('public')->putFile('',$file);
            $arr = ['status' => 200, 'msg' => '成功', 'path' => '/upload/'. $saveName];
            return json($arr);
        } catch (\Exception $e) {
            // 验证失败 输出错误信息
            return $this->exceptionHandle($e,'图片上传失败!' . $e->getMessage(),'json','');
        }
    }
}

3、修改文件 ->项目根目录->config.php
在这里插入图片描述
把storage 这三个参数修改成 upload