完好实现layui+thinkphp图片上传功能

admin

1前端

1. <div class="layui-upload-drag" id="upload">
   
2.     <i class="layui-icon"></i>
   
3.     <p>点击上传，或将文件拖拽到此处</p>
   
4.     <div class="layui-hide" id="uploadDemoView">
   
5.         <hr>
   
6.         <img src="" alt="上传成功后渲染" style="max-width: 196px">
   
7.     </div>
   
8. </div>

复制代码

1. <script>
   
2.     layui.use(['jquery','upload'],
   
3. 
   
4.         function () {
   
5.             $ = layui.jquery;
   
6.             var upload = layui.upload;
   
7. 
   
8.             //拖拽上传
   
9.             upload.render({
   
10.                 elem: '#upload'
    
11.                 , url: '/index.php/text/upload' //改成您自己的上传接口
    
12.                 , done: function (res) {
    
13.                     console.log(res.imgPath)
    
14.                     layer.msg('上传成功');
    
15.                     layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.imgPath);
    
16.                 }
    
17.             });  });
    
18. </script>

复制代码

后端

1. public function upload()
   
2.     {
   
3.         // 获取表单上传文件 例如上传了001.jpg
   
4.         $file = request()->file('file');
   
5.         // 上传到本地服务器
   
6.         $savename = Filesystem::disk('public')->putFile( 'upload', $file);
   
7.         //转换反斜杠
   
8.         $savename=str_replace('\\','/',$savename);
   
9.         //$savename  =》upload/20210725/28b20fe2b1913c94df7f84a239156fd7.png
   
10.         //拼接服务器地址
    
11.         $imgPath = 'http://127.0.0.1/upload/'.$savename;
    
12.         return json(['code'=>200,'imgPath'=>$imgPath,'msg'=>'成功']);
    
13. 
    
14.     }

复制代码