TP6.0框架 前端图片压缩成base64位的编码格式后上传到本地服务器
web前端图片压缩方法可参考我这边文章：web前端 图片压缩后上传到阿里云oss
里面引用到的几个js文件可以在我的github上获取
https://github.com/hujinchen/alyoss-compression
结合layui框架使用，效果图
这里选择图片后，没有立马上传到服务器，先通过一个input隐藏域存储base64的图片编码，当点击确定按钮后，再和其他的参数一起提交。
前端部分代码：
// 这里是点击数据表格中右侧的编辑按钮，然后弹出一个iframe层的主要方法。
// 监听行工具事件 注：tool 是工具条事件名，goodsTable-lay-filter 是 table 原始容器的属性 lay-filter="对应的值"
table.on('tool(goodsTable-lay-filter)', function (obj) {
var data = obj.data;
if (obj.event === 'edit') {
var id = data.id; // 商品自增id
// 通过缓存, 给iframe子页面传对象参数的方法
sessionStorage.setItem('event', 'edit');
sessionStorage.setItem('param', JSON.stringify(data));
layer.open({
type: 2,
title: '编辑商品：' + data.ProductName,
content: 'jumpView?url=goods/goodsEdit', // 新的地址
area: ['500px', '480px'],
btn: ['确定', '取消'],
yes: function (index, layero) {
var iframeWindow = window['layui-layer-iframe' + index],
submitID = 'goodsEditConfirm', // iframe页 确认按钮的id和 lay-filter=的值，要一样的
submit = layero.find('iframe').contents().find('#' + submitID);
// 监听iframe页提交
iframeWindow.layui.form.on('submit(' + submitID + ')', function (res) {
var field = res.field; // 获取iframe页提交的字段
field.id = id; // 商品ID
$.post({
url: "{:url('good/upGoods')}",
data: field,
success: function (res) {
if (res.code != 0) {
layer.msg(res.msg, { offset: 't', icon: 2 });
} else {
layer.msg('修改成功', { time: 1000, icon: 1 }, function () {
table.reload('goodsTable'); // 数据刷新
layer.close(index); // 关闭弹框
})
}
}
});
});
// 触发器 注：必需要有，不然监听不到
submit.trigger('click');
}
});
}
});iframe层：
商品编辑 - iframe框
{load href="__LAYUIADMIN__/layui/css/layui.css, __STATIC__/css/common.css" /}
点击上传，或将文件拖拽到此处
![上传成功后渲染]()
{js href="__STATIC__/js/browser.min.js" /}
{js href="__STATIC__/js/polyfill.min.js" /}
{js href="__STATIC__/js/aliyun-oss-sdk.min.js" /}
{js href="__STATIC__/js/compression.js" /}
{js href="__LAYUIADMIN__/layui/layui.js" /}
tp6框架部分代码：
/**
* 添加商品
* @param ProductName 商品名称
* @param UPCNo 国际码
* @param BrandName 品牌名称
* @param CategoryName 类别名称
* @param UsableQty 可用库存
* @param SalePrice1 价格1
* @param SalePrice2 价格2
* @param SalePrice3 价格3
* @param ProduceDate 生产日期
* @param goods_imgurl 商品图片 - base64格式
*/
public function addGoods(string $ProductName, string $UPCNo, string $BrandName, string $CategoryName, int $UsableQty, float $SalePrice1, float $SalePrice2, float $SalePrice3, string $ProduceDate, string $goods_imgurl)
{
$res = $this->uploadFilesImg($goods_imgurl);
if ($res['code'] == 0) {
$Goods = new Goods();
$Goods->addGoods($ProductName, $UPCNo, $BrandName, $CategoryName, $UsableQty, $SalePrice1, $SalePrice2, $SalePrice3, $ProduceDate, $res['data']);
return $this->succeed();
} else {
return $this->resultJson($res['code'], $res['msg']);
}
}
/**
* 修改商品
* @param id 商品id
* @param ... 其他参数同上
*/
public function upGoods(int $id, string $ProductName, string $UPCNo, string $BrandName, string $CategoryName, int $UsableQty, float $SalePrice1, float $SalePrice2, float $SalePrice3, string $ProduceDate, string $goods_imgurl)
{
$res = $this->uploadFilesImg($goods_imgurl);
if ($res['code'] == 0) {
// 处理价格为空
if ($ProduceDate == '' || $ProduceDate == null) {
$ProduceDate = '0000-00-00 00:00:00';
}
$Goods = new Goods();
$str_goods_imgurl = Goods::where('id', $id)->value('goods_imgurl');
// 判断图片文件是否存在，存在的话则删除旧的图片
if ($str_goods_imgurl) {
$path = app()->getRootPath() . './public/' . explode(Request::domain() . '/', $str_goods_imgurl)[1];
if (file_exists($path)) {
unlink($path);
}
}
$Goods->upGoods($id, $ProductName, $UPCNo, $BrandName, $CategoryName, $UsableQty, $SalePrice1, $SalePrice2, $SalePrice3, $ProduceDate, $res['data']);
return $this->succeed();
} else {
return $this->resultJson($res['code'], $res['msg']);
}
}
/**
* 主要代码是这段方法，我这边是把图片存放在 /public/static/image/ 中 ！！！
* 上传图片检验 - 图片上传到本地服务器
* @param goods_imgurl 商品图片 - base64编码格式
* @return 完整的图片地址（包括域名）
*/
public function uploadFilesImg(string $goods_imgurl)
{
$base64_img = trim($goods_imgurl);
$up_dir = app()->getRootPath() . './public/static/image/'; // 图片存放的位置
// 如果文件夹不存在则创建
if (!file_exists($up_dir)) {
mkdir($up_dir, 0777);
}
// 正则表达式：判断图片文件类型是否正确
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_img, $result)) {
$type = $result[2];
if (in_array($type, array('pjpeg', 'jpeg', 'jpg', 'gif', 'bmp', 'png'))) {
// 图片命名 - 格式如：20200502214128.png
$imgName = date('YmdHis') . '.' . $type;
$new_file = $up_dir . $imgName;
if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_img)))) {
// 完整的图片地址（包括域名）
$goodsImgurl = Request::domain() . '/static/image/' . $imgName;
return ['code' => 0, 'msg' => '图片上传成功', 'data' => $goodsImgurl];
} else {
return ['code' => 3003, 'msg' => '图片上传失败'];
}
} else {
return ['code' => 3002, 'msg' => '图片类型错误'];
}
} else {
return ['code' => 3001, 'msg' => '文件错误'];
}
}到此就基本结束了～
如果是tp6框架接收文件file对象的方法，可参考官方文档： 上传文件