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' => '上传失败'];
        }
    }
相关推荐
AI周红伟1 分钟前
事件分析:FDE标准,“OpenClaw+RAG+Agent” 应用实战的标准
前端·人工智能·chrome·chatgpt·aigc
无限进步_8 分钟前
Linux进程创建——fork与vfork深度解析
linux·运维·服务器
Mike_jia9 分钟前
Databasus:开源数据库备份革命的里程碑,企业级数据安全的守护神
前端
草莓熊Lotso13 分钟前
【Linux网络】深入理解传输层 UDP 协议:从底层原理到实战应用
linux·运维·服务器·c语言·网络·c++·udp
恋猫de小郭13 分钟前
真正的跨平台 AI 自动化框架,甚至还支持鸿蒙
android·前端·flutter
IT_陈寒15 分钟前
Redis的LRU淘汰策略坑了我一天血汗
前端·人工智能·后端
晓得迷路了16 分钟前
栗子前端技术周刊第 132 期 - date-fns 支持 Temporal、npm 攻击事件、VoidZero...
前端·javascript·css
雨季mo浅忆18 分钟前
记录Vue3项目中的各类问题
前端·bug·vue3
huipeng92620 分钟前
企业级微服务开发实战(三):公共模块设计与统一规范封装
java·spring boot·spring cloud·微服务·架构·系统架构·php
weixin_4083180420 分钟前
直播延迟优化实战:从1秒到200ms,WebRTC在医疗直播中的极致优化
服务器·网络·webrtc