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>
使用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' => '上传失败'];
}
}