指尖上的记忆指尖上的记忆
首页
  • 基础
  • Laravel框架
  • Symfony框架
  • 基础
  • Gin框架
  • 基础
  • Spring框架
  • 命令
  • Nginx
  • Ai
  • Deploy
  • Docker
  • K8s
  • Micro
  • RabbitMQ
  • Mysql
  • PostgreSsql
  • Redis
  • MongoDb
  • Html
  • Js
  • 前端
  • 后端
  • Git
  • 知识扫盲
  • Golang
🌟 gitHub
首页
  • 基础
  • Laravel框架
  • Symfony框架
  • 基础
  • Gin框架
  • 基础
  • Spring框架
  • 命令
  • Nginx
  • Ai
  • Deploy
  • Docker
  • K8s
  • Micro
  • RabbitMQ
  • Mysql
  • PostgreSsql
  • Redis
  • MongoDb
  • Html
  • Js
  • 前端
  • 后端
  • Git
  • 知识扫盲
  • Golang
🌟 gitHub

大部分时候,需要自定义wangeditor上传以后的json返回值的格式,注意本版号,下面这个是基于V4版本:

//默认格式
return $this->json([
            'errno' => 0,
            'data' => [$prefix . $url],
        ]);
//自定义格式        
return $this->json([
            'code' => 0,
            'msg' => 'operate success',
            'data' => ['url' => $prefix . $url],
        ]);
        
//自定义返回格式,需要修改customInsert 这个方法 中对result的取值方式   
this.editor.config.uploadImgHooks = {
  // 上传图片之前
  before: function(xhr) {
    console.log(xhr)

    // 可阻止图片上传
    // return {
    //   prevent: true,
    //   msg: '需要提示给用户的错误信息'
    // }
  },
  // 图片上传并返回了结果,图片插入已成功
  success: function(xhr) {
    console.log('success', xhr)
  },
  // 图片上传并返回了结果,但图片插入时出错了
  fail: function(xhr, editor, resData) {
    console.log('fail', resData)
  },
  // 上传图片出错,一般为 http 请求的错误
  error: function(xhr, editor, resData) {
    console.log('error', xhr, resData)
  },
  // 上传图片超时
  timeout: function(xhr) {
    console.log('timeout')
  },
  // 图片上传并返回了结果,想要自己把图片插入到编辑器中
  // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式,可使用 customInsert
  customInsert: function(insertImgFn, result) {
    // result 即服务端返回的接口
    console.log('customInsert', result)

    // insertImgFn 可把图片插入到编辑器,传入图片 src ,执行函数即可
    insertImgFn(result.data.url)
  }
}