APICloud上传图片到TP5后台并实现前端预览

2019-04-15 16:20发布

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后台用表单上传方式接收,但是出现点两次上传会出现一次上传失败…