フロントエンドは画像ファイルをアップロードします。tp5 フレームワークはそれをどのように処理しますか
効果画像：
効果画像1：
効果画像2：
如果需要看前端如何展示、删除上传的缩略图请到此篇博客：
フロントエンド：
<form id="upload_pic_wrap" target="upload_file" enctype="multipart/form-data" method="POST" action="/admin/mini_upload">
<div class="upload_wrap pull-left">
<i class="fa fa-upload fa-2x"></i>
<input type="hidden" name="name_js" value="create_product">
<input type="file" name="pic" onchange="mini_iamge(this)"accept="image/png, image/jpeg, image/jpg,image/gif">
</div>
</form>
<iframe name="upload_file" class="hidden"> </iframe>
<script>
function mini_iamge(that){
console.log(window.parent.updata_product);
//设置图片上限为5MB
var iamge_size=5000000;
var width_size=650;
var height_size=600;
//限制封面图上传图片的大小
function image_size(w,h,s) {
if (s>iamge_size || s<=0){
alert("封面图请上传大于0MB,小于5MB的图片");
return
}
//如果不需要做限制直接提交表单就可以了
if ((w<width_size-50 || w>width_size+50) || (h<height_size-50 || h>height_size+50)){
var width_d=width_size+50
var width_x=width_size-50
alert("请将图片的长设置在:'"+width_x+"'~'"+width_d+"'之间，"+ "\n请将图片的宽设置在:'"+(height_size-50)+"'~'"+(height_size+50)+"'之间，"+"\n上传的图片长为:'"+(w)+" 宽为:"+(h));
return;
}
//提交表单
jQuery("#create_form #upload_pic_wrap").submit();
}
//获取上传图片的大小
if (that.files) {
var f = that.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var data = e.target.result;
//加载图片获取图片真实宽度和高度
var image = new Image();
image.onload = function () {
var width = image.width;
var height = image.height;
var fileSize = f.size;
image_size( width, height, fileSize);
};
image.src = data;
};
reader.readAsDataURL(f);
} else {
var image = new Image();
image.onload = function () {
var width = image.width;
var height = image.height;
var fileSize = image.fileSize;
image_size( width, height, fileSize);
}
}
}
</script>
上記のコードから、iframe no-refresh テクノロジーを使用して画像がアップロードされ、アップロードされた画像のサイズを制限するために js が使用されていることがわかります。
サーバ：
上の画像から, 写真を受信するためのパラメータとアドレスを見ることができます. 写真を受信してパブリックの下に保存したら, パブリックの下にアップロードフォルダを作成する必要があります. 保存する必要がある写真のアドレスについてはデータベース、それはあなた自身のニーズに依存します。
route.php で写真をアップロードするためのインターフェイスを構成します。一貫性を保つために、フロント エンドから送信されたインターフェイスに注意してください。
//封面图处理
'admin/mini_upload' =>'index.php/admin/upload/mini_image',
例：
写真を加工する機能は他のところでも使われているので、この方法も共通して書きました。記述されたインターフェースでこのメソッドを呼び出すことは問題ありません。
common.php:
class commons extends \think\Controller {
//封面图处理
public function mini_upload(){
//接收图片
$file = request()->file("pic");
if ($file){
// 移动到框架应用根目录/public/uploads/ 目录下
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
if ($info) {
//上传成功 拼接图片的访问路径 /uploads/20190709/fssdsahfdskasa.jpg
$goods_logo = DS . 'uploads' . DS . $info->getSaveName();
$url=str_replace("\\","/", $goods_logo);
$mistake["code"] = 200;
$mistake["url"]=$url;
}else{
$mistake["code"]=-1;
$mistake["state"]="上传错误";
}
return $mistake;
}else{
$mistake["code"]=-1;
$mistake["state"]="上传错误";
return $mistake;
}
}
}
upload.php:
upload.php:
如果需要前端没有做展示、删除上传的封面图，后台代码就可以这样写，推荐看下这篇博客，有详细的说前端如何写js 地址：， 如果前端做了上传的图片展示，就按照前端的要求返回即可。
class Upload extends \commons
{
//封面图上传图片
public function mini_image(){
$request = Request::instance();
//调用处理封面图的函数
$res = $this->mini_upload();
//在页面中展示，删除图片，才会用到；
//前端上传的js名字，调用相关的方法
$name_js=$request->post("name_js");
$callback_target="window.parent.$name_js";
if ($res["code"]!=200) {
echo "<literal><script>$callback_target.error('图片长传失败')</script></literal>";
return;
}
$url=$res["url"];
echo ( "<literal><script>$callback_target.success('$url')</script></literal>");
return;
}
}