thinkphp5实现ajax图片上传,压缩保存到服务器

javascript 复制代码
<div class="warp">
      <input type="file" id="file"  accept="image/*" onchange="upimg(this)" />
 </div>
<img src="" />
<script>
    //上传图片方法
     function upimg(obj){
         var fileData = obj.files[0];//这是我们上传的文件
         console.log(fileData)
         var formData = new FormData();
         // 服务端要求参数是 pic1
         formData.append('image',fileData);
         $.ajax({
             url:"{:url('user/upmemberphoto')}",
             type:'post',
             data:formData,
             cache: false, //上传文件不需要缓存
             processData: false, // 告诉jQuery不要去处理发送的数据
             contentType: false, // 告诉jQuery不要去设置Content-Type请求头
             success:function(data){
                 console.log(data);
                 // 设置图片预览功能
                 $('.head-img').attr('src',data.picAddr);
             }
         })
     }
</script>

thinkphp压缩图片插件官方地址

使用Composer安装ThinkPHP5的图像处理类库:

composer require topthink/think-image

php 复制代码
    //上传会员照片接口
    public function upmemberphoto(){
        // 获取上传文件
        $file =  request()->file('image');


        $url=ROOT_PATH.'/public/uploads/member';

        // 移动到本地服务器==这个是保存原图
        $info = $file->move($url);

        if ($info) {
            $tempstr=$info->getSaveName();
            $tempstr=str_replace("\\","/",$tempstr);

            $imgurl=$url.'/'.$tempstr;

            // 按照原图的比例生成一个最大为320*320的缩略图并保存为thumb.png==这个是压缩后保存
            $image = \think\Image::open($imgurl);
            $image->thumb(320,320)->save($imgurl);

            return ['code' => 200, 'message' =>'上传成功','data'=>'/uploads/member/'.$tempstr];
        } else {
            // 文件上传失败
            return ['code' => 400, 'message' => '上传失败'];
        }
    }
相关推荐
锋行天下12 分钟前
数据库安全并发控制详解:乐观锁 vs 悲观锁 vs 原子操作
前端·数据库·后端
vortex51 小时前
Linux进程权限继承研究:从setuid()到exec()与system()的行为差异
linux·服务器·系统安全·suid
饼饼饼1 小时前
React19 新手指南:JSX 没那么难,用好这几条规则就够了
前端·javascript·react.js
想吃火锅10051 小时前
【前端手撕】new
前端
小小小小宇1 小时前
AI大背景下端到端界面测试
前端
信也科技布道师1 小时前
从Istio 503 NC 错误深入理解 Mesh 路由全链路原理
java·服务器·网络
小小小小宇1 小时前
前端端到端界面测试全解析与应用
前端
去伪存真1 小时前
如何将没有字幕的英文视频转换成中文视频?
前端·pytorch·llm
小小小花儿1 小时前
服务器上修改个人账户权限
linux·服务器
Coisinier1 小时前
RHCE中shell脚本基础(磁盘剩余空间监控,Web 服务状态检查,curl 访问 Web 服务并返回状态)
linux·运维·服务器·前端·nginx·操作系统