### 图片上传(内置)
##### 单图上传
<blockquote class="danger"><p>TP自带内置上传功能, 这个内置的上传是表单提交之后直接上传. 无需另写上传功能. 也就是没有回调. 这样有一个好处就是没有多余的垃圾图片传到服务器内. 坏处就是没有回调, 在提交表单之前无法进行预览.</p>
<p>由于TP内置图片上传, 无法使用ajax提交. 至少我没有找到方法. ajax就不走enctype="multipart/form-data"上传机制了. 所以内置上传不想绕过他的特性. 那么就直接用普通上传方式解决掉他.</p>
<p>builder上传图片是通过ajax提交, 所以内置上传无法在builder公用里面进行使用. 那么我们就要新建页面处理他.builder上传图片, 请使用自定义上传来搞定.</p></blockquote>
* 自己新建一个html文件,注意form表单里面要加入enctype="multipart/form-data"用于区分是否上传.
* 我也不想新建, 直接用builder来生成最好. 但是用生成的无法通过ajax传值到后台.
* 因为tp内置的上传只有在点击提交按钮的时候才走上传机制. 不然是无值的.
* 没有办法, 我们就用创建的文件来搞这个事.
* 那么以后就是, 第三方扩展上传图片(带回调)使用builder生成.
* 如果要是用TP内置的上传, 那么就用创建文件, 通过submit点击提交进行上传.
* 路径application/admin/view/index_nternalimg.html
~~~
{extend name="base"}
{block name="body"}
<div class="tpl-content-wrapper">
<ol class="am-breadcrumb">
<span class="layui-breadcrumb" lay-separator="-">
<a href="">首页</a>
<a><cite>内置图片上传</cite></a>
</span>
</ol>
<div class="tpl-portlet-components">
<div class="portlet-title">
<div class="caption font-green bold">
<span class="am-icon-code"></span> 内置图片上传测试
</div>
</div>
<div class="tpl-block ">
<div class="am-g tpl-amazeui-form">
<div class="am-u-sm-12 am-u-md-9">
<form class="layui-form" action="" enctype="multipart/form-data" method="post">
<div class="layui-form-item">
<label class="layui-form-label">上传</label>
<div class="">
<input type="file" name="single_img" >
</div>
</div>
<div class="layui-form-item item_password ">
<label class="layui-form-label">text上传</label>
<div class="layui-input-block">
<input type="text" name="single_text" id="single_text" value="" required="" lay-verify="required" placeholder="请填写text上传" autocomplete="off" class="layui-input" >
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">多图上传1</label>
<div class="">
<input type="file" name="figure[]" >
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">多图上传2</label>
<div class="">
<input type="file" name="figure[]" >
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">多图上传3</label>
<div class="">
<input type="file" name="figure[]" >
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit >立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<div id="demo4" style="float:right"></div>
</div>
</div>
</div>
</div>
</div>
</div>
{/block}
~~~
* 路径application/admin/controller/index.php
* 前面注释的是单图直接上传, 这样的话无需处理图片不改变板式直接上传服务器内.
* 没有注释的是图片经过处理的. single_img是我封装好的.拿来直接调用即可. 路径已经标注.
* HYQingKongTiJ.ttf 水印文字是百度下的. 同时TP官网给出的也是这个.因为那个1,2,3,4,5不支持中文.
* 此处包含单图上传, 单图处理后上传, 多图处理后上传.
* 图片处理记得安装插件 composer require topthink/think-image
~~~
public function NternalImg(){
if(IS_POST){
// 单图直接上传方法
// $file = request()->file('single_img');
// //如果在服务器内, 请给新建文件夹权限. 不然会出问题
// $info = $file->validate(['size'=>1567800000,'ext'=>'jpg,png,gif'])->move(ROOT_PATH . 'public' . DS . 'uploads');
// if($info){
// echo '/public/uploads/'.$info->getSaveName();
// }else{
// echo $file->getError();
// }
// halt($this->param);
// 单图上传处理方法
$single = '';
$file = request()->file('single_img');
if (true !== $this->validate(['image' => $file], ['image' => 'require|image'])) {
//此处用json返回也可以.
$this->error('请选择图像文件');
} else {
//single_img放在application/admin/common.php
$single = single_img(3,$file,'','','','','back');
}
//多图上传处理办法
$image = [];
$figure = request()->file('figure');
foreach($figure as $file){
if (true !== $this->validate(['image' => $file], ['image' => 'require|image'])) {
//此处用json返回也可以.
$this->error('请选择图像文件');
} else {
$image[] = single_img(3,$file,'','','','','back');
}
}
echo $single;
halt($image);
} else {
return $this->fetch();
}
}
~~~
* 路径application/admin/common.php
* 我将图片上传处理的方法封装在这里. 用于图片处理使用
* $saveName = request()->time().rand_string(6,1) . '.png'; 我在time之后加了一个随机串, 这样多图上传的时候不会冲突
~~~
use think\Image;
use think\Request;
/**
* [single_img description]
* @param integer $type [类型, 默认为图片裁剪]
* @param string $file [图片地址,上传来的图片地址.]
* @param integer $width [宽度,裁剪跟缩略图使用一个]
* @param integer $height [高度,裁剪跟缩略图使用一个]
* @param string $watermark [水印图片地址,默认为我设置的图片]
* @param string $word [文字水印的内容.]
* @param string $url [图片存放路径,由于参数无法放函数.所以我用一个判断进行执行. 这个是7的问题.暂时不研究]
* @return [type] [description]
*/
function single_img($type=1,$file='',$width=300,$height=300,$watermark='./public/common/img/logo.png',$word='www.bcahz.com',$url=''){
if($file){
if($url == ''){
$url = date("Ymd");
}
// 读取图片
$image = Image::open($file);
// 图片处理
switch ($type) {
case 1: // 图片裁剪
$image->crop($width, $height);
break;
case 2: // 缩略图
$image->thumb($width, $height, Image::THUMB_CENTER);
break;
case 3: // 垂直翻转
$image->flip();
break;
case 4: // 水平翻转
$image->flip(Image::FLIP_Y);
break;
case 5: // 图片旋转
$image->rotate();
break;
case 6: // 图片水印
$image->water($watermark, Image::WATER_NORTHWEST, 50);
break;
case 7: // 文字水印
$image->text($word, VENDOR_PATH . 'topthink/think-captcha/assets/ttfs/HYQingKongTiJ.ttf', 20, '#refeee');
break;
}
// 保存图片（以当前时间戳）
// /public/uploads/ 可以用config.get()进行设置, 这样的话, 不管oss或者本地图片路径都可以解决.
$saveName = request()->time().rand_string(6,1) . '.png';
$image->save(ROOT_PATH . '/public/uploads/'.$url.'/' . $saveName);
} else {
return false;
}
return '/public/uploads/'.$url.'/' . $saveName;
}
~~~
- 序言
- 简介
- 数据库
- 注册/登录
- controller
- model
- validate
- view
- config.php
- config配置
- builder
- builder-表单页
- builder-列表页
- 三级分销
- 分销注册
- 分销处理
- 图片上传(内置)
- 图片上传(插件)
- 多图上传(插件)
- 编辑器上传图片(路径/oss等)
- Excel导入/导出
- Excel-导出
- Excel-导入
- 商城规格/属性
- 类型处理
- 商城规格(Spec)
- 商城规格-表设计
- 商城规格处理
- 商城属性(Attribute)
- 商城属性-表设计
- 商品属性处理
- 分类管理(type)
- 分类设计-表设计
- 分类内容处理
- 商品列表
- 商品列表-表设计
- 商品内容处理
- 商品view处理