精华内容
下载资源
问答
  • 2018-05-16 15:06:37

    说到百度富文本编辑器ueditor(下面简称ue),我不得不给它一个大大的赞。我们在网站建设、前端开发时,网站的内容管理就使用了它。对于它的多图片上传和附件上传,个人感觉很好用,我就琢磨着是否可以外部调用多图上传和附件上传组件为自己所用,并封装成一个插件,节省单独开发的成本。

    有了这个想法后,着手操作,理下实现思路,得出实现的关键在于监听这两个组件在编辑器里的插入动作。打开源码,苦心研究,皇天不负苦心人,终于摸索出解决方法,现在分享出来,给拥有同样想法的小伙伴,为网站建设届尽一份力。

    注:本文基于UEditor1.4.3.3版本。

    1、引入ue相关文件,写好初始代码

    为了更好的封装整一个单独的插件,这里我们要做到示例化ue后隐藏网页中的编辑窗口,并移除焦点。

    <!doctype html>
    <html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>外部调用UEditor的多图上传和附件上传</title>
        <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
        <script type="text/javascript" charset="utf-8" src="ueditor.all.js"></script>
        <style>
                ul{display: inline-block;width: 100%;margin: 0;padding: 0;}
                li{list-style-type: none;margin: 5px;padding: 0;}
            </style>
    </head>
    <body>
    <h1>外部调用UEditor的多图上传和附件上传示例</h1>
     
    <button type="button" id="j_upload_img_btn">多图上传</button>
    <ul id="upload_img_wrap"></ul>
     
    <button type="button" id="j_upload_file_btn">附件上传</button>
    <ul id="upload_file_wrap"></ul>
     
    <!-- 加载编辑器的容器 -->
    <textarea id="uploadEditor" style="display: none;"></textarea>
     
    <!-- 使用ue -->
    <script type="text/javascript">
     
        // 实例化编辑器,这里注意配置项隐藏编辑器并禁用默认的基础功能。
     var uploadEditor = UE.getEditor("uploadEditor", {
            isShow: false,
            focus: false,
            enableAutoSave: false,
            autoSyncData: false,
            autoFloatEnabled:false,
            wordCount: false,
            sourceEditor: null,
            scaleEnabled:true,
            toolbars: [["insertimage", "attachment"]]
        });
     
        // todo::some code
     
    </script>
    </body>
    </html>
    2、监听多图上传和上传附件组件的插入动作
    uploadEditor.ready(function () {
        // 监听插入图片
        uploadEditor.addListener("beforeInsertImage", _beforeInsertImage);
        // 监听插入附件
        uploadEditor.addListener("afterUpfile",_afterUpfile);
    });

    3、自定义按钮绑定触发多图上传和上传附件对话框的事件

    我们对id="j_upload_img_btn"和id="j_upload_file_btn"的两个button绑定触发ue多图上传和上传附件对话框的事件,这样我们才能够操作ue。

    document.getElementById('j_upload_img_btn').onclick = function () {
        var dialog = uploadEditor.getDialog("insertimage");
        dialog.title = '多图上传';
        dialog.render();
        dialog.open();
    };
     
    document.getElementById('j_upload_file_btn').onclick = function () {
        var dialog = uploadEditor.getDialog("attachment");
        dialog.title = '附件上传';
        dialog.render();
        dialog.open();
    };

    4、多图上传

    多图上传的核心在于“beforeInsertImage”动作,此动作返回已选图片的信息集合。

    function _beforeInsertImage(t, result) {
        var imageHtml = '';
        for(var i in result){
            imageHtml += '<li><img src="'+result[i].src+'" alt="'+result[i].alt+'" height="150"></li>';
        }
        document.getElementById('upload_img_wrap').innerHTML = imageHtml;
    }

    5、新增“afterUpfile”动作

    对于附件上传,ue源码中并未提供插入动作的相关事件,所以这里我们手动添加一个触发动作“afterUpfile”。

    打开“ueditor.all.js”,搜索代码:

    me.execCommand('insertHtml', html);   //在此代码后插入以下代码
    me.fireEvent('afterUpfile', filelist);

    这样我们就新增了“afterUpfile”事件。这里核心在于 “fireEvent”。

    6、附件上传

    上一步中我们新增了“afterUpfile”动作,这里直接监听就可以了。

    function _afterUpfile(t, result) {
        var fileHtml = '';
        for(var i in result){
            fileHtml += '<li><a href="'+result[i].url+'" target="_blank">'+result[i].url+'</a></li>';
        }
        document.getElementById('upload_file_wrap').innerHTML = fileHtml;
    }

    以下是完整代码:

    注:本文基于UEditor1.4.3.3版本。

    <!doctype html>
    <html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>外部调用UEditor的多图上传和附件上传</title>
        <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
        <script type="text/javascript" charset="utf-8" src="ueditor.all.js"></script>
        <style>
            ul{display: inline-block;width: 100%;margin: 0;padding: 0;}
            li{list-style-type: none;margin: 5px;padding: 0;}
        </style>
    </head>
    <body>
    <h1>外部调用UEditor的多图上传和附件上传示例</h1>
     
    <button type="button" id="j_upload_img_btn">多图上传</button>
    <ul id="upload_img_wrap"></ul>
     
    <button type="button" id="j_upload_file_btn">附件上传</button>
    <ul id="upload_file_wrap"></ul>
     
    <!-- 加载编辑器的容器 -->
    <textarea id="uploadEditor" style="display: none;"></textarea>
     
    <!-- 使用ue -->
    <script type="text/javascript">
     
        // 实例化编辑器,这里注意配置项隐藏编辑器并禁用默认的基础功能。
     var uploadEditor = UE.getEditor("uploadEditor", {
            isShow: false,
            focus: false,
            enableAutoSave: false,
            autoSyncData: false,
            autoFloatEnabled:false,
            wordCount: false,
            sourceEditor: null,
            scaleEnabled:true,
            toolbars: [["insertimage", "attachment"]]
        });
     
        // 监听多图上传和上传附件组件的插入动作
     uploadEditor.ready(function () {
            uploadEditor.addListener("beforeInsertImage", _beforeInsertImage);
            uploadEditor.addListener("afterUpfile",_afterUpfile);
        });
     
        // 自定义按钮绑定触发多图上传和上传附件对话框事件
     document.getElementById('j_upload_img_btn').onclick = function () {
            var dialog = uploadEditor.getDialog("insertimage");
            dialog.title = '多图上传';
            dialog.render();
            dialog.open();
        };
     
        document.getElementById('j_upload_file_btn').onclick = function () {
            var dialog = uploadEditor.getDialog("attachment");
            dialog.title = '附件上传';
            dialog.render();
            dialog.open();
        };
     
        // 多图上传动作
     function _beforeInsertImage(t, result) {
            var imageHtml = '';
            for(var i in result){
                imageHtml += '<li><img src="'+result[i].src+'" alt="'+result[i].alt+'" height="150"></li>';
            }
            document.getElementById('upload_img_wrap').innerHTML = imageHtml;
        }
     
        // 附件上传
     function _afterUpfile(t, result) {
            var fileHtml = '';
            for(var i in result){
                fileHtml += '<li><a href="'+result[i].url+'" target="_blank">'+result[i].url+'</a></li>';
            }
            document.getElementById('upload_file_wrap').innerHTML = fileHtml;
        }
    </script>
    </body>
    </html>

    原文地址: https://www.cnblogs.com/lhm166/articles/6079973.html

    让我们一起遨游在代码的海洋里!

    更多相关内容
  • 主要介绍了UEditor编辑器自定上传图片文件路径的方法,需要的朋友可以参考下
  • 但是点击上传图片按钮后发现,无法正常进行图片上传,文件上传也是失败的,问题都是Flash Player需要升级, 因此火狐浏览器中安装对应的flash player组件,选择其中一个工作: 此时,文件上传和图片上传功能就能...
  • UEditor编辑器没有上传图片加水印的功能,需要进行二次开发,本例是PHPCMS系统中对百度编辑器进行二次开发,添加上传图片加水印功能。 首先打开UEditor编辑文件目录的php文件夹,打开Uploader.class.php,把...
  • 个人项目,公司项目都使用的是这个编辑器, 个人觉得还不错,使用也很方便简单,功能比较全, 有兴趣的自己可以二次开发,不会使用的也可以扣我,
  • 一、ckeditor4的配 1.下载ckeditor4 进入官网... 2.解压并配置 ... 3.进行功能配置 点开后会进入一个界面,网页中可以根据自己需要进行配置,并自动形成配置代码 ...5.引入CKEditor的js文件 这里我配置
  • 今天修改原来用phpcms v9做的网站的时候,发现碎片的编辑器那里不能上传图片了,然后看了下后台发布文章那里,也是一样不能上传图片
  • 主要介绍了微信小程序-拍照或选择图片上传文件的相关资料,需要的朋友可以参考下
  • #flask-ckeditor-demo
  • 现在很多CMS系统因为安全原因会把后台编辑上传功能给去除,但这样一来对实际使用过程造成了很多麻烦,今天我们以ASPCMS系统的FCKeditor编辑器为例,说明一下如何增加图片上传功能
  • 多功能在线图片编辑器源码 加水印加文字修剪等 无需上传文件的多功能图片批量处理程序
  • vue-tinymce 封装了el-upload 控件,支持富文本编辑器自定义图片上传整合。 复制到vue的src/components文件夹下 详情博文介绍见:https://xingyun.blog.csdn.net/article/details/102492921
  • 本文实例讲述了TP3.2.3框架使用CKeditor编辑页面中上传图片的方法。分享给大家供大家参考,具体如下: 最近项目要添加编辑器,以为CKeditor比较出名,所以研究了一下。。。 1、下载编辑器什么的不用说了 2、...
  • PHPMyWind更换编辑器ckeditor批量上传图片。以demo的方式展示,清晰易懂!整个文件代码可以直接复用,复用性强!
  • ckeditor编辑上传图片,文件,并且里面附带工具显示按钮
  • 主要介绍了Bootstrap中的fileinput 多图片上传编辑功能的实现,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • Froala编辑器多个文件上传插件 ================ 覆盖文件上传插件的相同选项。 { allowedFileTypes: ["*"], fileDeleteUrl: "", fileDeleteParams: {}, fileUploadParams: {}, fileUploadURL: ...
  • asp.net 使用ckeditor5富文本编辑器包含图片上传全部代码
  • NULL 博文链接:https://bnmnba.iteye.com/blog/2311249
  • 项目中一些特定的功能可能需要页面中用到富文本编辑器来实现文件的输入上传等等,这里用wangEditor来实现使用富文本编辑器进行文件图面的输入和上传保存,这里wangEditor也可以参考wangEditor使用文档 ...

    项目中一些特定的功能可能需要在页面中用到富文本编辑器来实现文件的输入上传等等,在这里用wangEditor来实现使用富文本编辑器进行文件图面的输入和上传保存,这里wangEditor也可以参考wangEditor使用文档

    1.引入相关的wangEditor.js和jquery文件:

    <head>
    <script type="text/javascript" src="/static/js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="/static/js/wangEditor.js"></script>
    </head>
    

    2.在jsp页面创建富文本编辑器:

    1. 使用一个div标签来代表编辑器输入框,在script中给这个div输入框添加编辑器模型
    2. 提交编辑的内容需要使用textarea标签,它是将输入内容转换成html代码然后提交,form包裹起来
    3. script中先创建一个wangEditor对象,在最后用 editor.create()进行编辑器内容添加
    4. div是无法提交数据的,如果要提交输入的内容还需要把div中的数据同步到textarea标签中,使用onchange事件实现同步更新到 textarea
    <body>
    	<form action="EditorResult.jsp" method="post">
    		<!-- 添加一个div用来显示富文本编辑器 -->
    		<div id="editor"> <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p> </div>
    	    <textarea name="editorval" id="text1" style="display: none"></textarea>
    	    <button type="submit">提交</button>
        </form>
        <!-- 注意, 只需要引用 JS,无需引用任何 CSS !!!-->
        <script type="text/javascript">
            var E = window.wangEditor	/* 创建一个对象 */
            var editor = new E('#editor')
            // 上传图片到服务器,后面加上图片地址
            editor.customConfig.uploadImgServer = '/upload' 
            //自定义name,接收的时候图片文件的那么用这个
            editor.customConfig.uploadFileName = 'upimg'
            var $text1 = $("#text1");
            /* 添加onchange事件实现textarea提交 */
            editor.customConfig.onchange = function (html) {
           		 // 监控变化,同步更新到 textarea
           		 $text1.val(html)
            }
            editor.create()
        </script>
    </body>
    

    3.可以将form提交地址中输出编辑器的内容,通过<textarea 标签的name 属性来获取:

    <body>
    	<% String val = request.getParameter("editorval");
    		out.print("当前富文本编辑器的内容:<br>");
    		out.print(val); %>
    </body>
    

    富文本编辑器样式:
    在这里插入图片描述
    接收编辑器内容并输出
    在这里插入图片描述

    4.使用富文本编辑器实现本地图片的上传:

    4.1:编辑器里可以上传本地图片也可以上传网络图片,网络图片只需要给到网络图片的链接地址编辑器会自己去引用并显示
    4.2:要实现本地图片的上传,需要在script中添加两条定义语句,分别是:配置服务器端地址就是选择图片上传后要访问的controller层的访问地址,还有一个是controller层方法中接收图片的参数名称:

    		// 上传图片到服务器,对应的是controller层的@RequestMapping("/upload")
            editor.customConfig.uploadImgServer = '/upload' 
            //自定义name,接收的时候图片文件的那么用这个,对应的是参数中的MultipartFile upimg名称
            editor.customConfig.uploadFileName = 'upimg'
    

    4.3:在web-app文件夹下新建一个文件夹用来存放图片信息:
    在这里插入图片描述

    5.在controller层新建一个文件夹用来执行图片的存储操作:

    5.1:参数包括从js中获取的自定义的图片名称 MultipartFile upimg
    5.2:先获取存放图片的文件夹的地址名称和生成一段随机的字符串用来代表存放图片的名称
    5.3:截取传来的文件的后缀名
    5.4:图片保存用upimg.transferTo()方法,upimg是传来的参数名称保存的时候生成新的文件名称
    5.5:工具类对象中存入异常状态和图片的地址等信息最后返回工具类对象

    图片上传到服务器
    @Controller
    public class UploadController {
    	@RequestMapping("/upload")
    	@ResponseBody
    	public EditorResult upload(MultipartFile upimg,HttpServletRequest request){
    		//工具类对象
    		EditorResult er = new EditorResult();
    		er.setErrno(1);
    		//获取文件地址
    		String basepath = request.getServletContext().getRealPath("/uploadimg");
    		String imgname = UUID.randomUUID().toString();
    		//文件后缀名
    		String suffix = upimg.getOriginalFilename().substring(upimg.getOriginalFilename().lastIndexOf("."));
    		//文件保存
    		try {
    			upimg.transferTo(new File(basepath+"/"+imgname+suffix));
    			//上传成功修改errno错误状态,返回路径
    			er.setErrno(0);
    			er.setData(new String[]{"/uploadimg/"+imgname+suffix});
    		} catch (IllegalStateException e) {
    			e.printStackTrace();
    		} catch (IOException e) {
    			e.printStackTrace();
    		}
    		//返回类型是固定的,这里需要一个工具类
    		return er;
    	}
    }
    

    5.6:上述方法中还用到的一个工具类,因为使用编辑器上传文件要求返回的内容是固定的errno错误代码和data数组存的是图片的线上地址:

    public class EditorResult {
    	private int errno;
    	private String[] data;
    	这里需要get和set方法
    }
    

    6.最后在springmvc中配置上传文件所需要的bean

    <!-- 配置bean来帮助实现上传文件操作 -->
    	<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    	</bean>
    
    展开全文
  • 最近开发的项目使用到WebUploader作为图片上传组件,封装了图片上传的所有基本操作,且使用PhotoSwipe实现图片预览功能。 1.准备工作 下载项目Github地址:https://github.com/tysxquan/suploader 使用demo目录下的...
  • //给图片添加删除 function mouseChange() { $[removed]("mouseenter mouseleave", ".file-iteme", function (event) { if (event.type === "mouseenter") { //鼠标悬浮 $(this).children(".info").fadeIn(...
  • 超好用的富文本编辑器,轻量级,不需要上传图片,视频,直接插入,没有异步上传等垃圾步骤,直转base64码-summernote-0.8.8下载,富文本编辑器下载
  • 包含页面 文件管理、文件新建、文件编辑、COS拖拽上传、COS插入外链文件,已实现文件增删改、插入外链文件、本地拖拽或点击上传文件、限制上传文件大小和格式、自动获取外链或上传文件大小、音视频时长,可以完全...
  • 主要介绍了Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 百度编辑器ueditor结合七牛云图片上传相结合,修改本地上传到七牛云,只需改动核心文件Upload.class.php的配置引入即可使用。配置改为你自己七牛云的key值和地址,空间名。我的访问地址为私有空间的访问地址,如果你...
  • 还是接着之前说过的最近...首先根据官方文档提供的API,挂接文件上传事件,然后自己用JS重新上传文件,最后用API把图片插入到编辑框内即可 本来是挺简单的问题,可惜官方也不知道为什么居然更改了接口写法…然后网上搜
  • SSM-文件上传方案

    千次阅读 2022-03-14 22:28:59
    文件上传方案基于Ajax+HTML的文件上传方案文件上传-二进制数据通过Ajax发送二进制流数据前端代码编写文件上传-后端处理后端代码编写消息响应文件服务器-分服务器文件上传后端开发-服务器职责将Tomcat服务器作为文件...


        JavaWeb后端服务开发过程中,有对文件上传服务的需求。

        在之前的《Axios+SSM上传和获取图片》中,提供了图片上传和显示的解决方案,但是对于数据量更大的文件,虽然例如MySQL数据库提供了用于存储二进制文件的Blob字段类型,但是,在文件读写过程中,可能会造成数据表或者二进制文件损坏的情况。

        因此,更加实用的方案是:将文件上传到Tomcat服务器所在主机或者远程主机的硬盘上存储,而将文件上传记录(即:文件链接/地址)以字符串形似存储到数据库中;等到用户通过浏览器页面,需要浏览文件时,再通过数据库中记录的文件链接信息,从本地或者远程主机的硬盘读取文件,将其响应给浏览器客户端展示/下载。

    在这里插入图片描述

    基于Ajax+HTML的文件上传方案

    文件上传-二进制数据

        在浏览器页面中实现文件选择功能,可以使用input type=file解决。
        需要上传的数据中,不建议携带除了上传资源以外的数据。但通常可以是,普通数据(用户名/id等)+二进制文件数据(二进制文件数据通过二进制流的方式发送给服务器)。

    通过Ajax发送二进制流数据

        发送二进制流数据,仍然是通过FormData对象实现。即:

        ①将将要上传的数据存储到FormData对象中;
        ② 将processData属性的值设置为false,告诉浏览器发送对象请求数据
        ③ 将contentType属性的值设置为false,设置请求数据的类型为二进制类型。
        ④ 正常发送ajax请求即可

    前端代码编写

        为了方便演示,通过JSP编写网页代码,举例如下:

    <%--
      Created by IntelliJ IDEA.
      User: 13241
      Date: 2022/3/1
      Time: 20:52
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>主页</title>
    </head>
    <body>
        文件上传demo
        <form enctype="multipart/form-data">
                <%--普通数据--%>
            <p><label for="user">用户:</label><input id="user" type="text" name="username"/></p>
                <%--二进制文件数据--%>
            <p><label for="file">文件:</label><input id="file" type="file" name="file"/> <br>
                <a id="uploadFile" href="javascript:void(0)" onclick="upload()">立即上传</a></p>
            <p><input id="btnsubmit" type="submit" value="提交"/></p>
        </form>
        <script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
        <script type="text/javascript">
            function upload(){
                //获取要上传的文件
                var file=document.getElementById("file").files[0];//二进制文件数据
                var username=document.getElementById("user").value;//普通数据
                if (file==undefined){
                    alert("请先选择文件.")
                    return false;
                }
                //将文件放入formData对象中
                var formData=new FormData();
                formData.append("file",file);
                formData.append("username",username);
                //ajax发送数据
                $.ajax({
                    headers: {
                        //有需要的话-添加token
                        'token':"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2NDcyNzM0MTEsImVtYWlsIjoiMTMyNDE1NjkyMEBxcS5jb20ifQ.EQYaVAMMqumGLKid_5EPhdz2VBJQBTbGFSDfdBYPwlM",
                    },
                    url:"/stasys_v3/upload/file",
                    type:"POST",
                    data:formData,
                    processData:false,
                    contentType:false,
                    success:function (result) {
                        console.log(result)
                    }
                })
            }
    
        </script>
    </body>
    </html>
    
    

    文件上传-后端处理

        前端通过Ajax,借助FormData对象上传二进制流文件数据,在后端的业务逻辑处理,需要借助commons-fileuploadcommons-io开发包实现。

     <!--文件上传依赖-->
        <dependency>
          <groupId>commons-fileupload</groupId>
          <artifactId>commons-fileupload</artifactId>
          <version>1.4</version>
        </dependency>
        <dependency>
          <groupId>commons-io</groupId>
          <artifactId>commons-io</artifactId>
          <version>2.8.0</version>
        </dependency>
    

        在编写代码时,需要在SpringMVC配置文件中,配置文件上传解析组件,具体配置如下:

      <!--文件上传解析组件
        id必须为multipartResolver
        springmvc默认使用该id找该组件
        -->
        <bean
    	    id="multipartResolver"
    	    class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    	      <!--单个文件的最大大小(以字节为单位)-1024*1024*512=512M-->
            <property name="maxUploadSizePerFile" value="536870912"/>
        </bean>
    

        后端处理后,可以将文件存储的链接/地址包含在json对象中响应给浏览器前端。例如:

    {state:true,msg:“服务器繁忙”,url:”上传成功的资源的请求地址”}
    

    后端代码编写

    package com.xwd.controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.multipart.MultipartFile;
    
    import javax.servlet.http.HttpServletRequest;
    import java.io.File;
    import java.net.InetAddress;
    import java.util.HashMap;
    import java.util.Map;
    import java.util.UUID;
    
    @Controller
    @RequestMapping(value = "/upload")
    public class UploadController {
    
        //methods
        @RequestMapping(value = "/file")
        @ResponseBody
        public Map<String,Object> uploadFile(@RequestParam(value = "file") MultipartFile file,
                                             @RequestParam(value = "username") String username,
                                             HttpServletRequest request){
            System.out.println(file);
            System.out.println("username="+username);
            //获取protocol通信协议
            String scheme = request.getScheme();// http
            //获取服务名称
            String serverName = request.getServerName();//localhost
            //获取端口号
            int serverPort = request.getServerPort();//8010
            //contextPath
            String contextPath = request.getContextPath();// /stasys_v3
            String url=scheme+"://"+serverName+":"+serverPort+contextPath+"/upload/";
            Map<String,Object> map=new HashMap<>();
            // 控制文件大小
            if(file.getSize()>1024*1024*512){
                map.put("status",false);
                map.put("message", "文件大小不能超过512M");
                map.put("url",null);
                return map;
            }
            try {
                //保存文件到当前项目根目录下
                String realPath = request.getServletContext().getRealPath("/upload");
                File dir=new File(realPath);
                //判断目录是否存在
                if (!dir.exists()){
                    dir.mkdirs();//不存在-创建新目录
                }
                //获取文件名
                String originalFilename = file.getOriginalFilename();
                //使用UUID替换文件名——避免文件名冲突
                String uuid= UUID.randomUUID().toString();
                //获取文件拓展名
                String extendsName = originalFilename.substring(originalFilename.lastIndexOf("."));
                //  控制文件类型
                if(!extendsName.equals(".zip")){
                    map.put("status",false);
                    map.put("message", "文件类型错误,必须为.zip压缩文件");
                    map.put("url",null);
                    return map;
                }
                //新的文件名-056af4c8-2a5a-4e6e-a108-45f689865264.zip
                String newFileName=uuid.concat(extendsName);
                //文件对应URL路径:http://localhost:8010/stasys_v3/upload056af4c8-2a5a-4e6e-a108-45f689865264.zip
                String fileUrl = url.concat(newFileName);
                //文件保存位置
                File saveLoc = new File(dir,newFileName);
                //保存文件
                file.transferTo(saveLoc);
                //填充返回值
                map.put("status",true);
                map.put("msg","文件上传成功!");
                map.put("url","");
            }catch (Exception e){
                e.printStackTrace();
                map.put("status",false);
                map.put("msg","文件上传失败!");
                map.put("url",fileUrl);
            }
            System.out.println(map.toString());
            return map;
        }
    }
    
    
    

    消息响应

    在这里插入图片描述

    文件服务器-分服务器文件上传

    后端开发-服务器职责

    在这里插入图片描述
        常见的服务器类型,例如:
        数据库服务器:运行数据库,提供基本属性数据的读写服务。
        缓存和消息服务器:负责处理高并发访问的数据缓存和消息
        文件服务器:负责存储用户上传的文件的服务器。
        应用服务器:用于部署JavaWeb应用。
        在实际开发中,会有很多职责不同的服务器,通过合理分工,可以提升项目的运行效率。

    将Tomcat服务器作为文件服务器

    制作并启动文件服务器

    在这里插入图片描述

        可单独解压一个Tomcat,作为文件服务器。
        【0】创建文件保存文件夹:upload
    在这里插入图片描述

        【1】配置文件服务器Server端口号:8006

    <!-- Note:  A "Server" is not itself a "Container", so you may not
         define subcomponents such as "Valves" at this level.
         Documentation at /docs/config/server.html
     -->
    <Server port="8006" shutdown="SHUTDOWN">
      <Listener className="org.apache.catalina.startup.VersionLoggerListener" />
    
    

        【2】修改连接器端口号为:8090

        <!-- A "Connector" represents an endpoint by which requests are received
             and responses are returned. Documentation at :
             Java HTTP Connector: /docs/config/http.html
             Java AJP  Connector: /docs/config/ajp.html
             APR (HTTP/AJP) Connector: /docs/apr.html
             Define a non-SSL/TLS HTTP/1.1 Connector on port 8080
        -->
        <Connector port="8090" protocol="HTTP/1.1"
                   connectionTimeout="20000"
                   redirectPort="8443" />
    
    

        【3】设置远程服务器非只读,修改web.xml中servlet初始化参数readOnly为false.

            <init-param>
                <param-name>readonly</param-name>
                <param-value>false</param-value>
            </init-param>
    

        【4】启动文件服务器
    在这里插入图片描述

    SSM项目:添加跨服务文件上传依赖

     <!--跨服务文件上传依赖-->
        <dependency>
          <groupId>com.sun.jersey</groupId>
          <artifactId>jersey-client</artifactId>
          <version>1.19</version>
        </dependency>
    

    跨服务器文件上传:前端代码编写

        前端代码无需改动。

    跨服务器文件上传:后端代码编写

        后端代码改动如下。

    package com.xwd.controller;
    
    import com.sun.jersey.api.client.Client;
    import com.sun.jersey.api.client.WebResource;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.multipart.MultipartFile;
    
    import javax.servlet.http.HttpServletRequest;
    import java.io.File;
    import java.net.InetAddress;
    import java.util.HashMap;
    import java.util.Map;
    import java.util.UUID;
    
    /**
     * @ClassName UploadController
     * @Description: com.xwd.controller
     * @Auther: xiwd
     * @Date: 2022/3/14 - 03 - 14 - 22:56
     * @version: 1.0
     */
    @Controller
    @RequestMapping(value = "/upload")
    public class UploadController {
        //properties
        private final static String FileServerDir="http://192.168.0.104:8090/upload/";
    
        //setter
    
        //getter
    
        //constructors
    
        //methods
        @RequestMapping(value = "/file")
        @ResponseBody
        public Map<String,Object> uploadFile(@RequestParam(value = "file") MultipartFile file,
                                             @RequestParam(value = "username") String username,
                                             HttpServletRequest request){
            System.out.println(file);
            System.out.println("username="+username);
            //获取protocol通信协议
            String scheme = request.getScheme();// http
            //获取服务名称
            String serverName = request.getServerName();//localhost
            //获取端口号
            int serverPort = request.getServerPort();//8010
            //contextPath
            String contextPath = request.getContextPath();// /stasys_v3
            String url=scheme+"://"+serverName+":"+serverPort+contextPath+"/upload/";
            Map<String,Object> map=new HashMap<>();
            // 控制文件大小
            if(file.getSize()>1024*1024*512){
                map.put("status",false);
                map.put("message", "文件大小不能超过512M");
                map.put("url",null);
                return map;
            }
            try {
                //保存文件到当前项目根目录下
                String realPath = request.getServletContext().getRealPath("/upload");
                File dir=new File(realPath);
                //判断目录是否存在
                if (!dir.exists()){
                    dir.mkdirs();//不存在-创建新目录
                }
                //获取文件名
                String originalFilename = file.getOriginalFilename();
                //使用UUID替换文件名——避免文件名冲突
                String uuid= UUID.randomUUID().toString();
                //获取文件拓展名
                String extendsName = originalFilename.substring(originalFilename.lastIndexOf("."));
                //  控制文件类型
                if(!extendsName.equals(".zip")){
                    map.put("status",false);
                    map.put("message", "文件类型错误,必须为.zip压缩文件");
                    map.put("url",null);
                    return map;
                }
                //新的文件名-056af4c8-2a5a-4e6e-a108-45f689865264.zip
                String newFileName=uuid.concat(extendsName);
                //创建sun公司提供的jersey包中的com.sun.jersey.api.client.Client类的对象
                Client client = Client.create();
                //提供文件服务器存储路径-http://192.168.0.104:8090/+新文件名
                WebResource webResource = client.resource(FileServerDir+newFileName);
                //提供文件的二进制数据file.getBytes()——保存文件到另一个服务器
                 webResource.put(String.class, file.getBytes());
                //填充返回值
                map.put("status",true);
                map.put("msg","文件上传成功!");
                map.put("url",FileServerDir+newFileName);
            }catch (Exception e){
                e.printStackTrace();
                map.put("status",false);
                map.put("msg","文件上传失败!");
                map.put("url",null);
            }
            System.out.println(map.toString());
            return map;
        }
    }
    
    

    在这里插入图片描述

    补充:基于Axios+Element UI文件上传方案

    后端代码

        后端代码同改动之后的跨服务器文件上传代码一致。

    Element UI组件使用与Axios数据请求

    el-upload上传组件

        使用Element UI的el-upload上传组件。

    			 <el-form-item label="实证文件:">
                    <el-upload
                      class="upload-demo"
                      :file-list="form.filelist"
                      :show-file-list="true"
                      drag
                      action="http://www.baidu.com"
                      :before-upload="beforeUpload"
                      :on-change="addFile"
                      :on-success="uploadSuccess"
                      :multiple="false"
                      :auto-upload="false"
                      accept=".zip"
                      :limit="1"
                    >
                      <i class="el-icon-upload"></i>
                      <div class="el-upload__text">
                        将文件拖到此处,或<em>点击上传</em>
                      </div>
                      <div class="el-upload__tip" slot="tip">
                        只能上传单个zip压缩文件,重复上传会导致文件覆盖
                      </div>
                    </el-upload>
    

    el-upload事件处理

        Element UI的el-upload上传组件的事件处理函数,根据需要修改函数体代码即可。

    	//文件上传之前文件类型检验
        beforeUpload(file) {
          console.log(file)
        },
        //添加文件-添加文件、上传成功和上传失败时都会被调用
        addFile(file, fileList) {
          //记录文件名称
          this.form.evidence = this.form.email + new Date().getTime() + file.name
          //记录文件对象
          this.form.file = file
          console.log(this.form.file)
          console.log(this.form.evidence)
        },
        //文件上传成功
        uploadSuccess(response, file, fileList) {
          console.log(response)
          console.log(file)
          console.log(fileList)
        },
    

    Axios发送文件上传请求

        使用Axios发送文件上传请求。

    axios({ 
              headers: { 'Content-Type': 'multipart/form-data' }, 
              url: 'http://localhost:8010/stasys_v3/upload/file', 
              method: 'POST', 
              data: formData, 
            }) 
              .then((res) => { 
                console.log(res) 
                if (res.data && res.data.status) { 
                  //文件已上传成功
                  this.$message({ 
                    message: '文件已上传!', 
                    type: 'success', 
                  }) 
                } else { 
                  this.$message.error('文件上传失败!') 
                } 
              }) 
              .catch((error) => { 
                console.log(error) 
                this.$message.error('信息上报失败!') 
              })
    

        响应结果如下:

    msg: "文件上传成功!"
    ​status: true
    ​url: "http://192.168.0.104:8090/upload/ca71cdb0-9245-4091-a623-1b1be4fa5ed3.zip"
    
    展开全文
  • 有的弹框不能用,如果有发现问题的,私聊我哦,我万分感谢!

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 123,039
精华内容 49,215
关键字:

怎么在文件编辑里上传图片