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

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