The front end uploads an image file, how does the tp5 framework handle it
Effect picture:
Effect picture one:
Effect picture two:
如果需要看前端如何展示、删除上传的缩略图请到此篇博客：
front end:
<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>
From the above code, it can be seen that the image is uploaded using the iframe no-refresh technology, and js is used to limit the size of the uploaded image
server:
From the picture above, you can see the parameters and address of receiving the picture. After receiving the picture and saving it under the public, you need to create an uploads folder under the public. As for the picture address that needs to be stored in the database, it depends on your own needs.
Configure the interface for uploading pictures in route.php, pay attention to the interface submitted by the front end to be consistent
//封面图处理
'admin/mini_upload' =>'index.php/admin/upload/mini_image',
Example:
The function of processing pictures is also used in other places, so I wrote this method in common. It is OK to call this method in the written interface.
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;
}
}