精华内容
下载资源
问答
  • 富文本上传图片成功,但是无法保存
    2020-07-21 16:26:25

    1、问题

    部署到服务器有一段时间了,有一天同事想在富文本里面插入图片,但是保存的时候报了个404错误,我到服务器查看图片上传成功了,于是本地测试了下,没有这个问题,思来想去没有搞明白是哪里的问题,网上搜索了很多资料,也试了很多办法,均不起作用,原来是问题没有找对

    2、环境描述

    服务器是用的centOs7.6,网站服务器是小皮面板(Linux)0.6版本

    3、最终的解决步骤

    经过好多次的尝试,发现报错的原因不对,我没有设置报错页面,找不到错误页面直接就是404,当我把错误页面全部整上,才发现是报的403错误,没有权限
    于是我又试着改权限,但是已经是755了,应该不是这个问题,因为只有上传图片保存的时候才有问题,就是出现img标签的时候才有问题,我想是不是Linux或者面板做了啥限制,最终定位在小皮面板的网站防火墙防止xss攻击上的配置找到了img字样,哦买噶,原来在这里,因为后台就我们几个同事登录,所以不太需要这么严格,所以果断去掉了img后,可以提交保存了

    \<(iframe|script|body|img|layer|div|meta|style|base|object|input)
    
    更多相关内容
  • 本篇文章将介绍vue-quill-editor上传图片的那些事,通常来说,我们数据库内都是保存图片路径的,所以上传完图片之后,要回传一个路径给前端,这才是完整的上传步骤。 第一步:上传图片,第二步:保存到服务器,并且...
  • 百度ueditor上传图片超范围后有两个问题,一是编辑器里图片显示不完整,二是添加图片后的网页在显示时也会超出网页不好看。想让它自适应100%,网上的方案能解决第一个问题,基本没有第二个问题的方案,经过多次测试...
  • layer 富文本编辑器layedit与form的使用,包含form提交时获取富文本的内容以及编辑器的图片上传
  • 简易的富文本编辑器保存网络图片到本地的方法,简单易懂易用
  • 我这里使用的是Element-ui的上传图片组件 首先引入Element-ui(这个我就不作赘述了,详情参考element中文官网) 在引入富文本组件vue-quill-editor 使用在main.js引入相应的样式 import VueQuillEditor from 'vue-...
  • ueditor修改版,上传图片直接保存到想要的位置,不再是项目中,添加图文内容直接转为二进制存储数据库方法,直接在页面显示,不需要任何处理。
  • 在你需要用的页面引入 富文本插件 import { quillEditor } from "vue-quill-editor"; import "quill/dist/quill.core.css"; import "quill/dist/quill.snow.css"; import "quill/dist/quill.bubble.css"; // **-...

    下载 npm install quill-editor --save
    下载依赖 npm install quill --save

       <div class="flex">   //直接隐藏掉就好了,用功能不用样式
            <span>商品详细说明:</span>
            <el-upload
              v-show="false"
              id="quill-upload"
              :action="serverUrl"
              multiple
              list-type="picture"
              :show-file-list="false"
              :before-upload="beforeUpload"
              :on-error="uploadError"
              :on-success="handleExceed"
            >
              <el-button size="small" type="primary"></el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
            </el-upload>
            <el-row v-loading="uillUpdateImg">
              <quill-editor v-model="saveModel.remark" :options="editorOption" ref="myQuillEditor"></quill-editor>
            </el-row>
          </div>
    
    

    在你需要用的页面引入 富文本插件

    import { quillEditor } from "vue-quill-editor";
    import "quill/dist/quill.core.css";
    import "quill/dist/quill.snow.css";
    import "quill/dist/quill.bubble.css";
    
    
    //   **------------------data里面写-----------------------------**
    //  上传图片部分
          uillUpdateImg: false, //根据图片上传状态来确定是否显示loading动画
          imgUrl: "http://lottery.gobuywin.com",  //  上传图片后路径的前缀
          serverUrl: "http://lottery.gobuywin.com/lottery/file/upload", //上传的图片服务器地址
          remark: "", //富文本内容
          editorOption: {
            //符文本编辑器的配置
            placeholder: "",
            theme: "snow",
            modules: {
              toolbar: {
                container: [
                  // 工具栏配置, 默认是全部
                  ["bold"],
                  ["italic"],
                  ["underline"],
                  ["strike"],
                  [{ list: "ordered" }, { list: "bullet" }],
                  ["blockquote"],
                  ["code-block"],
                  ["link"],
                  ["image"],
                  [{ list: "ordered" }, { list: "bullet" }]
                ],
                handlers: {
                  image: function(value) {
                    if (value) {
                      // 给个点击触发Element-ui,input框选择图片文件
                      document.querySelector("#quill-upload input").click();
                    } else {
                      this.quill.format("image", false);
                    }
                  }
                }
              }
            }
          }
    
    //   -------------------- methods里面写 ----------------------------------------------
    //   上传图片部分
        beforeUpload() {
          //上传图片之前开启loading
          this.uillUpdateImg = true;
        },
        uploadError() {
          //图片上传失败,关闭loading
          this.uillUpdateImg = false;
          this.$message.error("图片插入失败");
        },
        handleExceed(response, file, fileList) {
          //图片添加成功
          let quill = this.$refs.myQuillEditor.quill;
          if (response.result == "success") {
            let length = quill.getSelection().index;
            // 插入图片 response.data.url为服务器返回的图片地址
            quill.insertEmbed(length, "image", this.imgUrl + response.msg);
            // 调整光标到最后
            quill.setSelection(length + 1);
          } else {
            this.$message.error("图片插入失败");
          }
          this.uillUpdateImg = false;
        },
    

    以上操作就可以了
    文章来自于 https://www.jb51.net/article/160177.htm

    展开全文
  • asp.net 使用ckeditor5富文本编辑器包含图片上传全部代码
  • 之前用layui 富文本编辑器的时候,上传较大的图片时,图片显示不全,而且编辑起来非常的不便,这样的用户体验是非常不好的,想了好久没想出办法, 1.找到layedi.js 文件 路径:layui/lay/modules/layedit.js,如下图...

    之前用layui 富文本编辑器的时候,上传较大的图片时,图片显示不全,而且编辑起来非常的不便,这样的用户体验是非常不好的,想了好久没想出办法,

    1.找到layedi.js 文件
    路径:layui/lay/modules/layedit.js,如下图:
    搜索 src

    在这里插入图片描述

    在这里插入图片描述

    在src中加入即可

    style:'display:inline-block;max-width:50%;height:auto'
    //如果你想把这的静态封装成动态,可以参考 i 的封装。
    
    展开全文
  • } try { // 上传图片到 -》 “绝对路径” file.transferTo(f); } catch (IOException e) { e.printStackTrace(); return new Result("200", "上传失败", 500, false); } System.out.println(uuid+suffixName); mvv....
    @RestController
    @RequestMapping("/upload")
    public class UploadController {
    
       
        private final static String FILE_SAVE_PATH = "C:/Users/86182/Desktop/第二个CRM权限管理/OA前台/layuimg";
    
        @RequestMapping("/uploadImg")
        private Object uploadFile(@RequestParam(value = "file") MultipartFile file, HttpServletRequest request) {
            Map<String,Object> mv=new HashMap<String, Object>();
            Map<String, String> mvv = new HashMap<String, String>();
            if(file==null) {
                return new Result("200", "上传失败", 500, false);
            }
            //获取文件名
            String fileName = file.getOriginalFilename();
            //获取后缀 比如:.jpg
            String suffixName = fileName.substring(fileName.lastIndexOf("."));
            //此处生成 uuid 作为新的文件名称
            String uuid = UUID.randomUUID().toString().replaceAll("-", "");
            //此处拼接得到最终文件保存路径( E:/hbui/Product/img/生成的uuid.jpg)
            String savePath = FILE_SAVE_PATH + File.separator+uuid + suffixName;
            File f = new File(savePath);
            // f.getParentFile()获取文件的父级路径,即:FILE_SAVE_PATH 的值
            if (!f.getParentFile().exists()) {
                //mkdirs()是创建多级目录
                f.getParentFile().mkdirs();
            }
            try {
                // 上传图片到 -》 “绝对路径”
                file.transferTo(f);
            } catch (IOException e) {
                e.printStackTrace();
                return new Result("200", "上传失败", 500, false);
            }
            System.out.println(uuid+suffixName);
            mvv.put("src", "layuimg/" + uuid+suffixName);
            mvv.put("title",uuid+suffixName);
            mv.put("code", 0);
            mv.put("msg", "上传成功");
            mv.put("data", mvv);
            return mv;
        }
    
    
    }
    
    
    
    
    
    //注意:layedit.set 一定要放在 build 前面,否则配置全局接口将无效。
    //layedit.build('demo'); 
    layedit.set({
    				uploadImage: {
    					url: globalData.server + '/upload/uploadImg'
    				}
    
    			});
    			var index = layedit.build('demo', {
    				tool: ['strong' //加粗
    					, 'italic' //斜体
    					, 'underline' //下划线
    					, 'del' //删除线
    					, '|' //分割线
    					, 'left' //左对齐
    					, 'center' //居中对齐
    					, 'right' //右对齐
    					, 'link' //超链接
    					, 'unlink' //清除链接
    					, 'face' //表情
    					, 'image' //插入图片
    					, 'help' //帮助
    				]
    			});
    
    
    展开全文
  • powperpaste现在是收费插件,官网最低售价12美元/每月,可从word直接粘贴富文本,同时上传图片
  • 问题:因为富文本编辑器上传图片后,是转成base64保存进数据库,图片过大时参数会很长。 前提条件:安装了quill富文本编辑器。npm install quill@1.3.6 1,安装好后在页面直接引入quill import Quill from "quill"; ...
  • 今天,我们来讲一下富文本编辑器上传图片功能的操作。首先,在这里需要引入一个js插件 (config.js),在插件里面写下配置图片上传的路径。 接下来,既然要实现上传图片的功能,那我们就需要一个东西是用来接收...
  • springboot文件上传整合富文本编辑器
  • 现在在web端的输入框需要直接复制图片进去,于是就用上了富文本编辑器。 正文 在研究了多个富文本编辑器后,基于免费、好用、简洁的原则(主要是基于免费),最终选择使用wangEditor。 使用场景 从Word中复制图片、...
  • ueditor1.4.3 富文本插件完美使用,搭建后可以直接上传图片以及多图片上传回显。主要的配置在config.json。可以查看官网ip,一般人出问题都是在config.json,或者不知道案例文件该怎么放,放哪里。
  • WangEditor上传图片文本
  • tinymce实现从word直接粘贴并自动上传图片 powerpaste plugin source code,亲测可用
  • 看到了很多文本编辑器,最后还是决定选择百度富文本编辑器,功能强大,接地气,蛮好看的。恩,于是去下载百度富文本编辑器吧,http://ueditor.baidu.com/website/download.html。我下载的是1.4.3jsp版(utf-8)。看看...
  • quill-image-extend-module功能:提供图片上传到服j务器的功能(复制插入,显示上传进度,显示上传成功或者失败) 1:安装插件 npm install vue-quill-editor --save-dev npm install quill-image-extend-module --save-...
  • 总结一下今天在使用summernote富文本上传图片保存到Oracle数据库时出现的各种问题以及解决方案。供大家遇到相同问题时的参考~          Summernote    ...
  • 项目中一些特定的功能可能需要在页面中用到富文本编辑器来实现文件的输入上传等等,在这里用wangEditor来实现使用富文本编辑器进行文件图面的输入和上传保存,这里wangEditor也可以参考wangEditor使用文档 ...
  • 百度ueditor富文本--配置图片上传

    万次阅读 2017-08-24 19:32:39
    我们在之前的文章中已经学习了如何 初始化百度ueditor富文本编辑器:百度ueditor富文本--PC端单个,PC端多个,mobile单个,mobile多个官网对编辑器的初始化和使用文档是比较详细的,这里就不多说了。本小节 主要记录...
  • VueQuillEditor富文本上传图片-非base64

    千次阅读 2020-06-01 14:19:08
    本篇文章将介绍vue-quill-editor上传图片的那些事,通常来说,我们数据库内都是保存图片路径的,所以上传完图片之后,要回传一个路径给前端,这才是完整的上传步骤。 第一步:上传图片,第二步:保存到服务器,并且...
  • 当配置好ueditor的时候,这个时候上传图片是在一个临时文件夹内,当重启tomact服务器就没了,所以我们要获取到富文本编辑器上传图片保存到本地。 先贴前台代码: var ue = UE.getEditor('editor'); UE....
  • 上传图片要添加两个属性, useCustomImageHandler @image-added=“handleImageAdded” <template> <div id="app"> <VueEditor useCustomImageHandler @image-added="handleImageAdded" v-model...
  •  百度富文本编辑器默认将图片、视频上传至项目里,如果使用Tomcat作为服务器的时候,如果不配置图片保存路径,将图片保存在项目路径下,那么再次打war包发布项目可能会造成图片的丢失,每次重启前将图片先保存再...
  • 上传图片后提供一个可静态访问图片的地址(http://+ip+":"+port+/+"file"+/+图片名称) 配置 package com.zxy.dpp.common.config; import org.springframework.context.annotation.Bean; import org.spring...
  • AVUE 富文本编辑器 avue-plugin-ueditor 图片上传

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,670
精华内容 3,468
关键字:

富文本上传图片保存的是什么