版权声明:本文为博主原创文章,未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1333877
JQuery
插件(H5移动前端图片批量压缩上传),看其中的介绍是使用了 base64
编码的方式进行上传base64
编码数据即可,然后后台进行处理,下面主要介绍我的操作流程,可做参考.upload()
方法.处理目的: 1. 将获取的
base64
编码传到后台,如果后台顺利处理完毕,会返回它的存储路径,然后我进行了多图片存储路径在页面上(隐藏域)的拼接,方面后面提交后的数据库数据存储 2. 如果没有成功,则会返回错误提示信息
// 图片上传,将base64的图片转成二进制对象,塞进formdata上传
function upload(basestr, type, $li) {
var text = window.atob(basestr.split(",")[1]);
var buffer = new Uint8Array(text.length);
for (var i = 0; i < text.length; i++) {
buffer[i] = text.charCodeAt(i);
}
var toUrl = "{:U('Order/ajaxUploadCommentImgs')}";
$.post(
toUrl,
{'basestr':basestr},
function (res) {
if (res.status){
var imgStr = $(".imgStr").val();
$(".imgStr").val(imgStr+"^^"+res.message);
}else {
layer.msg(res.message);
}
},'JSON'
)
}
注意事项 1. 此时尤其注意下,向后台传输的数据是否为正确的编码 个人开发测试时,手贱剔除了
"data:image/jpeg;base64"
,这一段,可不要犯同样的错误 2. 想要知道自己的base64
编码是否正确,建议使用 在线转换工具 测试一下
base64_image_content()
方法,注意下面我的 showMsg()
方法,实现的功能就是向前端返回处理后的 json
数据.public function ajaxUploadCommentImgs(){
$postData = I('post.');
if(IS_AJAX && IS_POST){
$uploadUrl = "Public/Upload";
$tagUrl = $this->base64_image_content($postData['basestr'],$uploadUrl);
if ($tagUrl){
//TODO 将其写入数据库
return showMsg(1,$tagUrl);
}else{
return showMsg(0,'图片上传失败!');
}
}else{
return showMsg(0,"请求不合法!");
}
}
/**
* [将Base64图片转换为本地图片并保存]
* @param $base64_image_content [要保存的Base64]
* @param $path [要保存的路径]
* @return bool|string
*/
public function base64_image_content($base64_image_content,$path){
//匹配出图片的格式
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){
$type = $result[2];
$new_file = $path."/".date('Ymd',time())."/";
$basePutUrl = C('UPLOAD_IMG_BASE64_URL').$new_file;
if(!file_exists($basePutUrl)){
//检查是否有该文件夹,如果没有就创建,并给予最高权限
mkdir($basePutUrl, 0700);
}
$ping_url = genRandomString(8).time().".{$type}";
$ftp_image_upload_url = $new_file.$ping_url;
$local_file_url = $basePutUrl.$ping_url;
if (file_put_contents($local_file_url, base64_decode(str_replace($result[1], '', $base64_image_content)))){
//TODO 个人业务的FTP 账号图片上传
ftp_upload(C('REMOTE_ROOT').$ftp_image_upload_url,$local_file_url);
return $ftp_image_upload_url;
}else{
return false;
}
}else{
return false;
}
}
//为了获取绝对路径 ‘UPLOAD_IMG_BASE64_URL’ => str_replace(‘Application/Common/Conf/config.php’, ”, str_replace(‘\’, ‘/’, FILE)),undefined
file_put_contents()
所要传入的 local_file_url
参数要求为绝对路径,不然会报错的啊啊啊啊啊,本人也是卡住了好半天!!!base64
编码上传,前端除了效果设计,处理逻辑相对是类似的,目的就是向后台传输规范的 base64
编码本文中所提供的
Jquery
插件,测试可支持iphone7
微信内置浏览效果以及谷歌浏览器的使用,确定就是没有提供取消按钮 所以,异步图片数据的上传可能返回信息有延迟,以至于图片路径还未返回,就进行了整体表单的数据提交,造成数据遗失.
showMsg()
方法展示,用于 json
数据的返回/**
* 公用的方法 进行信息的提示
*/
function showMsg($status, $message, $data = array())
{
$result = array(
'status' => $status,
'message' => $message,
'data' => $data
);
exit(json_encode($result));
}