layui 富文本上传图片后 自动插入的图片为undefined怎么回事

如图

img

图片接口返回的数据是
{code: 0, msg: "done", src: "http://www.10xq.com:1080/dy/9/sp/20220304-6649.jpg",…}
code: 0
data: "http://www.10xq.com:1080/dy/9/sp/20220304-6649.jpg"
msg: "done"
src: "http://www.10xq.com:1080/dy/9/sp/20220304-6649.jpg"
title: "http://www.10xq.com:1080/dy/9/sp/thumb/20220304-6649.jpg"

富文本自动插入的图片 是

img

求帮助

html中 js部分


```php


<script>
    layui.use(['layedit', 'form'], function(){
        var form = layui.form;
        var layedit = layui.layedit;
        layedit.set({    //设置图片接口
            uploadImage: {
                url: 'http://www.10xq.com:1080/dy/9/tup.php?imgpath=sp', //接口url
                type: 'post'
            }
        });
        //创建一个编辑器
        var index = layedit.build('lay_edit',{
            height: 350
        });
        //提交时把值同步到文本域中
        form.verify({
            //content富文本域中的lay-verify值
            content: function(value) {
                return layedit.sync(index);
            }
        });
 
        form.on("submit(formSubmit)", function (data) {
            console.log(data.field);
            $.post("layEdit/save", data.field, function(result){
                layer.msg(result.msg,{offset:'rb'});
            });
            return false;  
        })
    });
</script>



图片接口 部分:


<?php
$imgurl="http://www.10xq.com:1080/dy/9/";
// 允许上传的图片后缀
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
// echo $_FILES["file"]["size"];
$extension = end($temp);     // 获取文件后缀名
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 20480000)   // 小于 20M,这个自己限制
&& in_array($extension, $allowedExts))
{
    $imgpath=$_GET['imgpath'];  //获取传来的图片分类,用于在服务器上分类存放
    $code = $_FILES['file'];//获取小程序传来的图片 
    $uploaded_file=$_FILES['file']['tmp_name'];  
    //$user_path=$_SERVER['DOCUMENT_ROOT'].$imgpath;  //放到服务器下指定的文件夹
    $user_path=$imgpath;  //放到服务器下指定的文件夹
    
  if(file_exists($user_path)){
  }else{
  mkdir($user_path,0777); 
  }
    $size=$_FILES["file"]["size"];
    $date=date('Ymd');        //得到当前时间
    $newfilename=$date.'-'.$size.'.'.$extension;        //得到一个新的文件名,可根据自己需求设定,sham用的时间加上图片文件大小来命名
    $move_to_file=$user_path."/".$newfilename;  
    
    
    //$file_true_name=$imgurl.$imgpath."/".$newfilename; 
    $file_true_name=$imgurl."/".$newfilename; 
    //echo $file_true_name;
    $filename = json_encode($file_true_name);//把数据转换为JSON数据.
   // echo $move_to_file;
    move_uploaded_file($uploaded_file,iconv("utf-8","gb2312",$move_to_file));
 
 //下面的代码是用来生成缩略图的 
  $thump = $user_path."/thumb/";   //这个缩略图文件夹地址自己设置,这个是在原图文件夹里面增加1个子目录thumb用于存放缩略图
  if(file_exists($thump)){
  }else{
  mkdir($thump,0777); 
  }
  $imgs = $newfilename;
  $imgss=$user_path."/".$imgs;
  $img_arr = getimagesize($imgss); 
  $pecent = $img_arr[0]/$img_arr[1];
  $width = 200;    //这里是缩略图的尺寸,自行设置
  $height = 200/$pecent; 
//下面是根据不同图片后缀,执行不同的图片生成代码
  if($_FILES["file"]["type"] == "image/png"){
    $img_in = imagecreatefrompng($imgss);
  }elseif($_FILES["file"]["type"] == "image/jpg" || $_FILES["file"]["type"] == "image/jpeg" || $_FILES["file"]["type"] == "image/pjpeg"){
    $img_in = imagecreatefromjpeg($imgss);
  }elseif($_FILES["file"]["type"] == "image/gif"){
    $img_in = imagecreatefromgif($imgss);
  }
  
  $img_out = imagecreatetruecolor($width, $height); 
  imagecopyresampled($img_out, $img_in, 0, 0, 0, 0, $width, $height, $img_arr[0],             
  $img_arr[1]); 
  imagejpeg($img_out,$thump.$imgs,100); 
  imagedestroy($img_out);
  imagedestroy($img_in);
  
 
  $imgsrc=$imgurl.$imgpath."/".$newfilename;
 
  $thumbsrc=$imgurl.$imgpath."/thumb/".$newfilename;
 
  $json = json_encode($imgsrc);//把数据转换为JSON数据.
 
  echo "{".'"code": 0,'.  '"msg": "done",'.'"src": "'.$imgsrc.'",'.'"thumbsrc": "'.$thumbsrc.'",'. '"data"'.":".$json."}";
  
 
  //这里一定要有code,msg,$json,不然好像就会报错,就是这个折腾了我好久,新手之郁闷
 
 
}else
{
    echo "上传错误";
}     
?>

实际上图片也上传成功了

直接复制图片地址能访问,图片和你站点是一个域名吗

img


你这个console打印出来是个什么东西?这个data.field是有值的吗?如果有值,你传到接口里面去了吗?还有就是你如果只需要显示的这个图片,是不需要经过接口的,前端点击上传-》选择图片-》显示就行了啊,显示这个过程应该不需要用到后端接口吧,前端就能解决了。