知识学习

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 388|回复: 0

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

[复制链接]

升级   100%

152

主题

152

帖子

734

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
734
发表于 2022-6-8 12:57:20 | 显示全部楼层 |阅读模式
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. JS代码
  9. <script>
  10.         layui.use(['form', 'jquery', 'layer', 'upload'], function() {
  11.             var form = layui.form,
  12.                 layer = layui.layer,
  13.                 upload = layui.upload;
  14.             
  15.             upload.render({
  16.                 elem: '#image1',
  17.                 url: '/upload/upload/image',//提交入口文件自己更改
  18.                 accept: 'image',
  19.                 size: 3 * 1024,
  20.                 before: function(obj) {},
  21.                 done: function(res) {
  22.                     if (res.status == 200) {
  23.                         layer.msg(res.msg, {
  24.                             icon: 1
  25.                         })
  26.                         $('#image2').attr('src', res.path)
  27.                         $('#image').val(res.path)
  28.                     } else {
  29.                         layer.msg(res.msg, {
  30.                             icon: 2
  31.                         })
  32.                     }
  33.                 }
  34.             });
  35.         })
  36.     </script>
复制代码
2.后端
TP6 后台代码
  1. namespace app\upload\controller;

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

把storage 这三个参数修改成 upload

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



回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|知识学习 ( 鲁ICP备20015483号 )

GMT+8, 2024-4-21 13:18 , Processed in 0.070306 second(s), 26 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表