前端使用了图片上传组件来上传图片，那么后台如何来正确存储入库呢
网上找的一段图片上组件的 ，效果代码如下：
<style>
.img_up {
overflow: hidden;
margin-top: 20px;
padding-top: 15px;
}
.img_up .img_look {
float: left;
}
.img_up .img_look .picc {
width: 60px;
height: 60px;
border-radius: 5px;
float: left;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin: 0 3px;
margin-bottom: 15px;
position: relative;
}
.img_up .img_look .picc .k_close {
position: absolute;
width: 15px;
height: 15px;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAABZUlEQVQokY3TrYtWQRSA8d8ZXlHBIDZRBJNhB0wWg8myBjH4scWyu8kggph2wbLgCouCmhRdRVjZDYJBDCJaNBkM8y9oEkWxiDBj2Ltyvb4veNo58zwzZzgz0VozjJbyNI5iPz7hXdTyfMhFX24pz+A6DvyzIx+xELU82iqknngVTyaIsA8PW8rLf53cUj6JZxOkcXEuatmIGlMJ37CrWziFI1jowTfwEi+6/Bd2JJzoiZCjlkXc6/K1qOUyDvWYbTgzwvFBS0st5YNRy3xLuUQtt1rKN3FpwB0bYe+YO821lD904vkxIuxONkcwjPWo5U5LeTZqeYwHY5gfCW8GxWtRy0xLeQX3W8p3o5Y5LA64t1FjaoTv2NkVp3EYyz1wCa/wussbtm/N+SzWx7Q2KWajltUEUcsGVv5TvB21rNJ7nlHLFczj8wTpKy5ELRf/OMNf1VIe4bTNV7YHX/AeT6OWn332N0Dmd/lzblueAAAAAElFTkSuQmCC') no-repeat center;
top: -7px;
right: -4px;
}
.img_up .uploadImgBtn {
float: left;
width: 60px;
height: 60px;
float: left;
margin: 0 3px;
border: 1px solid #e4e4e4;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAAAqCAYAAAAajbNEAAADeklEQVRoge2Yu2sUURTGfysbUDFkQRC0kMU/IFmwsspYaQoxlXauIkEtBOMRbRKWRBRFhmgVwULTmUaiiGAaN4o2gqzpxY0g4gPMgyg+Yizuneydyc7s3Jll2SIfLDv33vP6zj33zCOzurpKHIjIJNAHdMZSSI4l4JXrugfjKmQtjB+xjycROoEDNgo2JDzsAJYT6AH8Bv4a483AJmO8Bfhma9SahOu6X+PIiUjY0h5gFzALLAbWftjGA/4sxIKIbEviSOMe8A54AcwDpwPrW5MYtSaRAgIUjXEGGAe60xpuJYmTIfPH0hpuJYnPIfMf0hpuGgkR6RORQxEiQ3XmvgB30vpuCgkROQs8AR6JyMUQsZfAIeAN8Al4AOwFfqb1n+Q+4YOInAdcY+q6iGSBq3XEH+tfB/AnrW8PSXZiTUdELuAn4OEKMBxho2kEfAFZYBnWCNyIkBslmsh2YHcC/+tgS+KX67orInKKaAIeRvUviB7gPTCH/5ksYxkPYEdiBVgQkWvAbQu9YeCyMe4GXlN7Gp4EjurrRGVmc7AXUQ9/lxL4GQI+As9RBDoC6/eB78A08A/LCkndnSww3mD9KXAGdVPcaWPYhkSierXEOKqklmyUWvnYERcd+N85GsKGRCt2woNVcm2EuywDSQMrXzZnYhrYZxdLYszaCGfifu1oZ7TjwbbGBol2wQaJdsEGiXZBZmBgoN68A5Rj6BdQX/Kqhl5FzzUDOf1v2nMIxBZ2x+4NCobgMDBijIsRes9i2HSA/ca4oP9NvXWxpXmfKKBeLx1tGCAPlAyZGcNhmRrh46jd8wWTFGlIjFHLWhnoB94CUw30HGo71osqmRxwIkS+EBjntQ0P1TASefwZBX9WzTXvul+v9wT0zHI7h6rvh6idqLK+JBthIjgRRqIaYbgALFAj5MnlgMEGAdw0bJRQyRohuhFUaFB2Scqpon/mbjhGYCZu4Q9wTI8XUOUzr3XHCCdSpHbmTEygu2KzPhSU8WerH5XlYGDeTuVRh7sLdY68+WASevVa0I6jbVShuV87HBSRguG8HvpR52ZOy1cjbOaJcc9pJol54K6+Dus0oLrXFLUuU0Qd9HJALkdMZPH3eQ9OiPxaHdZBBZX9EirbwVYbZnNe++/VMl6jKBGza2VZX8/EVJ4JCWiQ+gGP1PETZdNrw/Xgm/8P0s/CuQZfWWIAAAAASUVORK5CYII=') no-repeat center;
}
.img_up .uploadImgBtn input {
width: 100%;
height: 100%;
opacity: 0;
}
.img_up_b {
float: none;
padding-left: 340px;
padding-right: 15px;
}
.img_up_b .piccc {
float: left;
width: 116px;
height: 116px;
border-radius: 5px;
margin-bottom: 15px;
background: #f5f5f5 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEUAAABFCAYAAAAcjSspAAAB40lEQVR4nO3av0ocYRSG8Wc2ZhFMo6hVCuuARboUQRAbSwPWio1FKpFcR0iZq0hhF3IBKVKkSREQtJZEorgEzB+PxYyiwzsLAfnOBN8fbLHfFHP22WVnl/mICJIfLyPie9Q+RcST7JmqiCDRM+Bja+0bsAD8LD5NY5B14sa2WJsDVkoPclN2lJmO9fmiU7RkR/ndsf6r6BQt2VFSv9C6ZEfpJUcRHEVwFMFRBEcRHEVwFMFRBEcRHEVwFMFRBEcRHEVwFMFRBEcRHEVwFMFRBEcRHEXoa5S0+8gAE5knB0Yd69PAJOXetIfAGXABXO86eAqsA3+bgyWG+QNsAovi2GkzR6k3bQgcA6+Bt1VEvADeFTr5/2C5iogRMJU9SY/sVZG8a6eHvg6A8+wpeubzANjKnqJHDoFXV1ef58Aa9WWwayPNXboAZoGNjuPvgS/AgwKzQP26j4A3wEnmRsBH1JddZZU6TIrMX7SPxxy7t3veqsRzj9XX/z6pHEVwFMFRBEcRHEVwFMFRBEcRHEVwFMFRBEcRHEVwFMFRBEcRHEVwFMFRBEcRHEVwFCEzSqlbov8sM8q4e9bDYlMImVEOqO/yK6clB2nL/qTsiPUz4EPhWW7J/qLdA3aBH83zfWCJ5E/KJVVlFi2v9LPCAAAAAElFTkSuQmCC') no-repeat center;
}
.img_up_b .img_look {
float: none;
overflow: hidden;
}
.img_up_b .uploadImgBtn {
float: none;
margin-top: 15px;
margin-top: 0;
position: relative;
width: 106px;
height: 38px;
background: #f6f6f6;
border: 1px solid #b4b4b4;
}
.img_up_b .uploadImgBtn input {
position: relative;
z-index: 10;
cursor: pointer;
}
.img_up_b .uploadImgBtn span {
display: block;
position: absolute;
width: 100%;
z-index: 5;
text-align: center;
top: 0px;
left: 0;
display: block;
color: #5a5a5a;
line-height: 36px;
}
.img_up_b .img_look .picc {
width: 116px;
height: 116px;
}
.img_up_b .img_look .picc .k_close {
display: none;
}
</style>
<div class="img_up">
<div class="img_look"></div>
<div class="uploadImgBtn" id="uploadImgBtn">
<input class="uploadImg" type="file" name="file" multiple="" id="file">
</div>
</div>
<script>
var files;
$(document).ready(function () {
$("#uploadImgBtn").click(function () {
/*
1、先获取input标签
2、给input标签绑定change事件
3、把图片回显
*/
// 1、先回去input标签
var $input = $("#file");
console.log($input)
// 2、给input标签绑定change事件
$input.on("change", function () {
//给input标签设置multiple属性，一次可以上传多个文件
//获取选择图片的个数
files = this.files;
var length = files.length;
console.log("选择了" + length + "张图片");
//3、回显
$.each(files, function (key, value) {
var div = document.createElement("div"),
close = document.createElement("span"),
img = document.createElement("img");
div.className = "picc";
close.className = "k_close";
var fr = new FileReader();
fr.onload = function () {
img.src = this.result;
div.style.backgroundImage = 'url(' + this.result + ')';
console.log(this.result);
div.appendChild(close);
$('.img_look')[0].appendChild(div);
}
fr.readAsDataURL(value);
})
})
$input.removeAttr("id");
var newInput = '<input class="uploadImg test" type="file" name="file" multiple id="file">';
$(this).append($(newInput));
})
})
$('.img_up').on('click', '.k_close', function () {
$(this).parent('.picc').remove()
})
</script>比如这个字段名称叫tupian，对应我们的后台的字段，Image类型入库
模块内容发布为例：
1、复制template/pc/default/member/module_post.html到 template/pc/default/member/demo/module_post.html
2、通过url访问发布界面：/index.php?s=member&app=demo&c=home&m=add
3、在新的模板中，首先定义一个隐藏域来此图片字符串
<input name="data[tupian]" id="dr_tupian" type="hidden" value="">
4、处理提交函数
<input type="button" value="提交" onclick="dr_my_post()" class="submit">
<script type="text/javascript">
function dr_my_post() {
$('#dr_tupian').val($('.img_look').html()); // 这里把图片上传的编码赋值到隐藏域，然后我们后台处理图片转换
$('#dr_is_draft').val(0);dr_ajax_submit('{dr_now_url()}', 'myform', '2000')
}
</script>5、二次开发模块的发布控制器
dayrui/App/Demo/Controllers/Member/Home.php
<?php namespace Phpcmf\Controllers\Member;
class Home extends \Phpcmf\Member\Module
{
// 内容列表
public function index() {
$this->_Member_List();
}
public function add() {
if (IS_POST) {
// 表示发布前的处理
$aid = 0; // 这个表示附件的存储策略id，0表示本地存储默认
$img = $_POST['data']['tupian'];
$_POST['data']['tupan'] = []; // 接收post过来的图片字符串
if (preg_match_all('/url\((.+)\)/U', $img, $mt)) {
foreach ($mt[1] as $t) {
$content = str_replace('"', '', $t);
// 把base64格式的图片转换为实际图片
if (preg_match('/^(data:\s*image\/(\w+);base64,)/i', $content, $result)) {
$ext = strtolower($result[2]);
if (!in_array($ext, ['png', 'jpg', 'jpeg'])) {
$this->_json(0, dr_lang('图片格式不正确'));
}
$content = base64_decode(str_replace($result[1], '', $content));
if (strlen($content) > 30000000) {
$this->_json(0, dr_lang('图片太大了'));
}
// 上传到本地服务器
$rt = \Phpcmf\Service::L('upload')->base64_image([
'ext' => $ext,
'content' => $content,
'attachment' => \Phpcmf\Service::M('Attachment')->get_attach_info($aid, 0),
]);
if (!$rt['code']) {
exit(dr_array2string($rt));
}
// 附件归档
$att = \Phpcmf\Service::M('Attachment')->save_data($rt['data']);
if (!$att['code']) {
exit(dr_array2string($att));
}
$_POST['data']['tupan'][] = $att['code'];
} else {
$this->_json(0, dr_lang('图片内容不规范'));
}
}
}
}
$this->_Member_Add();
}
public function edit() {
$this->_Member_Edit();
}
public function del() {
$this->_Member_Del();
}
}6、提交后，后台就可以看到图片内容了
例子是以内容模块为例，表单相关提交方法跟这个类似了
文档最后更新时间：2023-08-10 02:58:09