thinkphp6 + layui upload 图片、文件上传功能实现

admin

1.前段

  1、layui 代码

1. <div class="layui-form-item">
   
2.         <label class="layui-form-label">上传图片</label>
   
3.                 <div class="layui-input-block" id="image1">
   
4.                         <img src="/static/image_icon/WechatIMG2.png" alt="" id="image2" style="height: 80px;width: 80px">
   
5.                         <input type="hidden" name="image" id="image">
   
6.                 </div>
   
7. </div>``
   
8. 
   
9. JS代码
   
10. <script>
    
11.         layui.use(['form', 'jquery', 'layer', 'upload'], function() {
    
12.             var form = layui.form,
    
13.                 layer = layui.layer,
    
14.                 upload = layui.upload;
    
15.             
    
16.             upload.render({
    
17.                 elem: '#image1',
    
18.                 url: '/upload/upload/image',//提交入口文件自己更改
    
19.                 accept: 'image',
    
20.                 size: 3 * 1024,
    
21.                 before: function(obj) {},
    
22.                 done: function(res) {
    
23.                     if (res.status == 200) {
    
24.                         layer.msg(res.msg, {
    
25.                             icon: 1
    
26.                         })
    
27.                         $('#image2').attr('src', res.path)
    
28.                         $('#image').val(res.path)
    
29.                     } else {
    
30.                         layer.msg(res.msg, {
    
31.                             icon: 2
    
32.                         })
    
33.                     }
    
34.                 }
    
35.             });
    
36.         })
    
37.     </script>

复制代码

2.后端
TP6 后台代码

1. namespace app\upload\controller;
   
2. 
   
3. use think\facade\Config;
   
4. use think\facade\Env;
   
5. class Upload
   
6. {
   
7.     /**图片上传*/
   
8.     public function image()
   
9.     {
   
10.         $file = request()->file('file');
    
11.         // 移动到框架应用根目录/uploads/ 目录下
    
12.         try{
    
13.             // 验证
    
14.             validate(['imgFile'=>[
    
15.                 'fileSize' => 410241024,
    
16.                 'fileExt' => 'jpg,jpeg,png,bmp,gif',
    
17.                 'fileMime' => 'image/jpeg,image/png,image/gif', //这个一定要加上，很重要我认为！
    
18.             ]])->check(['imgFile' => $file]);
    
19.             // 上传图片到本地服务器
    
20.             $saveName = \think\facade\Filesystem::disk('public')->putFile('',$file);
    
21.             $arr = ['status' => 200, 'msg' => '成功', 'path' => '/upload/'. $saveName];
    
22.             return json($arr);
    
23.         } catch (\Exception $e) {
    
24.             // 验证失败 输出错误信息
    
25.             return $this->exceptionHandle($e,'图片上传失败!' . $e->getMessage(),'json','');
    
26.         }
    
27.     }
    
28. }

复制代码

3、修改文件 ->项目根目录->config.php
上传序偶保存的目录

把storage 这三个参数修改成 upload

结束：这样就完全可以 最终会在 public 文件下 生成 upload文件