9、ThinkPHP6实战开发高大上企业站（TP6）之图片上传

前言

在我们制作网站的过程中，图片上传功能是很常用的一个功能。例如：头像、文章缩略图等。今天给大家安排上。文章上传我是基于layui上传组件。后台代码应该是一致的。

前台

// html
<div class="layui-form-item h-form-item">
  <label class="layui-form-label">封面</label>
  <div class="layui-input-inline">
    <input name="cover" lay-verify="required" id="LAY_avatarSrc" placeholder="请输入封面图片" value=""
      class="layui-input">
  </div>
  <div class="layui-input-inline layui-btn-container" style="width: auto;">
    <button type="button" class="layui-btn layui-btn-primary" id="LAY_avatarUpload">
      <i class="layui-icon">&#xe67c;</i>上传图片
    </button>
    <!-- <button class="layui-btn layui-btn-primary" layadmin-event="avartatPreview">预览</button> -->
  </div>
</div>

// js
upload.render({
        elem: '#LAY_avatarUpload',
        url: '/admin/upload/', // 此处配置你自己的上传接口即可
        size: 10 * 1024, // 限制文件大小，单位 KB
        accept: 'images ',
        done: function (res) {
          // layer.msg('上传成功')
          console.log(res)
          if(res.code === 200) {
            form.val('form-val-filter', {
              cover: res.data
            });
          }
        }
      })

后台

新建一个Upload控制器，并在index中添加如下方法

// 获取上传的文件对象
        $file = Request()->file('file');

        $savename = \think\facade\Filesystem::disk('public')->putFile('uploads', $file);

        if($savename) {
            return jsonSuccess('数据获取成功~', '/public/' . $savename);
        } else {
            return jsonError('上传失败：' . $file->getError());
        }

最终效果