class="markdown_views prism-atom-one-light">
前端JS代码
api.getPicture({
sourceType: 'library',
encodingType: 'jpg',
mediaValue: 'pic',
destinationType: 'base64',//选择图片编码格式base64
quality: 50,
targetWidth: 750,
targetHeight: 750
}, function(ret, err) {
if (ret) {
//设置需要预览的img的src的值为选择图片后对应的base64Data数据
$api.attr($api.dom('img'), 'src', ret.base64Data);
api.ajax({
url: 'http://192.168.43.201/app/image/uploads',//上传到TP5后台控制器方法
method: 'post',
data: {
values: {
image: ret.base64Data//直接通过传递变量的方式传递base64编码后的图片数据
},
}
},function(ret, err){
if (ret) {
alert( ret.msg);//根据自己后台方法返回的数据alert出相应的数据
} else {
alert(ret.msg);//同上
}
});
} else {
alert(JSON.stringify(err));
}
});
TP5后台方法
public function uploads(){
$base64 = input('image', '');//获取前端ajax发送的base64加密过的图片数据
//利用正则表达式对传递过来的图片数据进行替换,将数据中‘,’号前面的为' ',注包括',',
//具体怎么查看前端传的图片数据可以在前端 选择图片的回调事件中打印一下图片数据
$image_content = preg_replace('#^data:image/w+;base64,#i', '', $base64);
$image_content = base64_decode($image_content);//解密base64编码的图片数据
$pic_path = './uploads/toxiang/';//定义一个保存图片的文件目录,此处是已创建的文件目录
$pic_path .= md5(md5(time())) . '.jpg';//根据时间生成图片名并使用md5加密,也可以前端传递一个文件名
$size = file_put_contents($pic_path, $image_content);//利用file_put_contents进行图片文件的写入
if ($size) {
ajaxmsg("上传成功", 1);//此处是封装的一个json返回的方法,也可以直接echo打印
}else {
ajaxmsg("上传失败", 0);//同上
}
}
注:博主也尝试url编码的图片上传带后台,然后我ajax上传的时候把本地url写入files这个变量中,TP5后台用表单上传方式接收,但是出现点两次上传会出现一次上传失败…