bootstrap-wysiwyg中JS控件富文本中的图片由本地上传到服务器(阿里云、七牛、自己的数据库)

简介: 一、我假设你是要保存到自己的数据库中(因为上传到阿里云、七牛更简单原理一样的)点击插入图片如下图:1、其实你插入的时候不需要做什么处理一样也可以插入数据库的(但是前提你插入的那个字段必须要求足够空间比如Mysql你要用LONGTEXT类型,否则是存不下的这样子前台获取的时候就取不到)原因是你保存的时候,它把图片给转换为了data:image/gif;base64,这样子话所以一般不建议直接用,因为你可能存几张后就会出错了。

一、我假设你是要保存到自己的数据库中(因为上传到阿里云、七牛更简单原理一样的)

点击插入图片如下图:



1、其实你插入的时候不需要做什么处理一样也可以插入数据库的(但是前提你插入的那个字段必须要求足够空间比如Mysql你要用LONGTEXT类型,否则是存不下的这样子前台获取的时候就取不到)原因是你保存的时候,它把图片给转换为了data:image/gif;base64,这样子话所以一般不建议直接用,因为你可能存几张后就会出错了。

2、先把图片上传到服务器(你自己的)然后再修改图片的Url,找了好多网上的资料,感觉写的都比较复杂,嗯这里自己就试着写了一个比较简单的是利用Ajax传到后台插入,然后这个控件自己会修改它的路径,只需要如下步骤:

a、打开你自己调用的bootstrap-wysiwyg.js这个文件,我们来修改一下readFileIntoDataUrl这个方法,应该就是这个文件的第一个方法啦,把它的先注释了,修改为这样子

    var readFileIntoDataUrl = function (fileInfo) {
        var form = new FormData();
        form.append("editorImage", fileInfo);
        var xhr = new XMLHttpRequest();
        xhr.open("post", "/Admin/Ajax/ajaxUploadFile", false);//这里是你传到后台的入库的方法,这个方法返回图片路径就可以了
        xhr.send(form);
        return xhr.responseText;
    };

b、ajaxUploadFile这个方法要做的事情就是把获取到的$_FILES中的图片入库代码如下:

/*后台bootstrap-wysiwyg.js上传图片*/
    public function ajaxUploadFile(){
        header("content-type:text/html;charset=utf-8");
        //echo 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1508372197,632975480&fm=80';exit;
        $upload = new \Think\Upload();// 实例化上传类
        $upload->maxSize   =     3145728 ;// 设置附件上传大小
        $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
        $upload->rootPath  =     'Public/Uploads/'; // 设置附件上传根目录
        $upload->savePath  =     ''; // 设置附件上传(子)目录
        $upload->saveRule = uniqid;
        // 上传文件
        $info   =   $upload->upload($_FILES);//上传图片的方法
        $imagesModel=M('maiclub_images');
        $data['image_url']=$info['editorImage']['savepath'].$info['editorImage']['savename'];
        $data['create_time']=time();
        $data['id']=null;
        if($imagesModel->add($data)) {
            echo __APP__.'/Public/Uploads/'.$data['image_url'];exit;
        }else{
            echo '入库失败了,联系管理员';exit;

        }


    }


3、亲测是成功的,祝你幸运,也可以成功哦。交流群:368848856嘿嘿

PHP+Mysql网站源码学习请访问PHP+Mysql网站源码学习请访问

http://www.erdangjiade.com/


相关文章
|
7天前
|
关系型数据库 OLAP 数据库
拒绝等待!阿里云瑶池数据库 x Qwen3,构建增强式RAG
阿里巴巴发布的通义千问Qwen3在性能上超越多个国际顶尖模型,阿里云瑶池数据库已适配该模型,支持私域部署并与Dify无缝集成。传统RAG方案在处理复杂关系和多跳推理时存在局限,而GraphRAG通过图结构存储知识,结合Qwen3和AnalyticDB PostgreSQL,可有效解决这些问题,提升知识关联检索与分析能力。某新零售客户案例表明,GraphRAG能更好地满足高复杂度业务需求,提供直观的知识图谱可视化服务。阿里云提供Qwen3全系列模型的私域部署解决方案,确保数据安全和服务稳定性。
|
14天前
|
安全 OLAP 数据库
拒绝等待!阿里云瑶池数据库 x Qwen3,构建增强式RAG
阿里云瑶池 Dify on DMS + AnalyticDB 现已支持通义千问 Qwen3 全系列模型的私域部署,并提供独占模型服务,实现高效安全的 GraphRAG 业务应用及大模型应用开发解决方案。
|
19天前
|
人工智能 运维 关系型数据库
|
1月前
|
Cloud Native 关系型数据库 MySQL
华鼎冷链科技 × 阿里云瑶池数据库,打造全链路协同的智慧冷链新标杆
从 PolarDB 的高性能数据库服务到 AnalyticDB 的强大数据分析,阿里云提供的丰富产品矩阵为华鼎冷链科技构建了全面的解决方案,推动华鼎冷链科技从成本中心向效率中心转型。
|
1月前
|
人工智能 关系型数据库 分布式数据库
让数据与AI贴得更近,阿里云瑶池数据库系列产品焕新升级
4月9日阿里云AI势能大会上,阿里云瑶池数据库发布重磅新品及一系列产品能力升级。「推理加速服务」Tair KVCache全新上线,实现KVCache动态分层存储,显著提高内存资源利用率,为大模型推理降本提速。
|
3月前
|
Cloud Native 关系型数据库 分布式数据库
世界第一!阿里云PolarDB刷新全球数据库性能及性价比记录
世界第一!阿里云PolarDB刷新全球数据库性能及性价比记录
|
2月前
|
人工智能 Cloud Native 关系型数据库
亚太唯一,阿里云连续5年位居Gartner®云数据库管理系统报告「领导者」
亚太唯一,阿里云连续5年位居Gartner®云数据库管理系统报告「领导者」
|
3月前
|
关系型数据库 数据库 数据安全/隐私保护
云数据库实战:基于阿里云RDS的Python应用开发与优化
在互联网时代,数据驱动的应用已成为企业竞争力的核心。阿里云RDS为开发者提供稳定高效的数据库托管服务,支持多种数据库引擎,具备自动化管理、高可用性和弹性扩展等优势。本文通过Python应用案例,从零开始搭建基于阿里云RDS的数据库应用,详细演示连接、CRUD操作及性能优化与安全管理实践,帮助读者快速上手并提升应用性能。
|
3月前
|
人工智能 Cloud Native 关系型数据库
亚太唯一!阿里云连续5年入选Gartner®云数据库管理系统「领导者」象限
亚太唯一!阿里云连续5年入选Gartner®云数据库管理系统「领导者」象限
|
3月前
|
人工智能 Cloud Native 关系型数据库
阿里云连续5年进入领导者象限!Gartner®云数据库管理系统报告发布
阿里云连续5年进入领导者象限!Gartner®云数据库管理系统报告发布
67 3