百度编辑器（UEditor）——调用上传图片、上传文件等模块 千次阅读

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

更多相关内容

UEditor编辑器自定义上传图片或文件路径的修改方法
2020-10-25 22:35:14

主要介绍了UEditor编辑器自定上传图片或文件路径的方法,需要的朋友可以参考下

收起
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2020-12-18 09:58:26

但是点击上传图片按钮后发现，无法正常进行图片上传，文件上传也是失败的，问题都是Flash Player需要升级，因此在火狐浏览器中安装对应的flash player组件，选择其中一个工作：此时，文件上传和图片上传功能就能...

收起
为百度UE编辑器上传图片添加水印功能
2020-12-18 02:53:41

UEditor编辑器没有上传图片加水印的功能，需要进行二次开发，本例是在PHPCMS系统中对百度编辑器进行二次开发，添加上传图片加水印功能。首先打开UEditor编辑器文件目录的php文件夹，打开Uploader.class.php，把...

收起
kindeditor编辑器，可上传多图片，文件上传等功能
2018-06-27 14:59:43

个人项目，公司项目都使用的是这个编辑器，个人觉得还不错，使用也很方便简单，功能比较全，有兴趣的自己可以二次开发，不会使用的也可以扣我，

收起

asp.net
富文本编辑器CKEditor配置及图片上传配置
2021-01-20 03:14:34

一、ckeditor4的配 1.下载ckeditor4 进入官网... 2.解压并配置 ... 3.进行功能配置点开后会进入一个界面，在网页中可以根据自己需要进行配置，并自动形成配置代码 ...5.引入CKEditor的js文件在这里我配置

收起
phpcms v9的后台编辑器无法上传图片的解决方法
2020-09-29 03:23:33

今天在修改原来用phpcms v9做的网站的时候，发现碎片的编辑器那里不能上传图片了，然后看了下后台发布文章那里，也是一样不能上传图片了

收起
微信小程序-拍照或选择图片并上传文件
2020-08-31 18:22:22

主要介绍了微信小程序-拍照或选择图片并上传文件的相关资料,需要的朋友可以参考下

收起
flask-ckeditor-demo:Flask项目集成富文本编辑器CKeditor演示，实现了图片上传、文件上传、Flash上传等功能
2021-07-05 13:28:14

#flask-ckeditor-demo

收起

Python
FCKeditor编辑器添加图片上传功能及图片路径问题解决方法
2020-10-26 01:46:44

现在很多CMS系统因为安全原因会把后台编辑器里的上传功能给去除，但这样一来对实际使用过程造成了很多麻烦，今天我们以ASPCMS系统的FCKeditor编辑器为例，说明一下如何增加图片上传功能

收起
多功能在线图片编辑器源码加水印加文字修剪等无需上传文件的多功能图片批量处理程序
2021-11-25 22:38:23

多功能在线图片编辑器源码加水印加文字修剪等无需上传文件的多功能图片批量处理程序

收起
vue-tinymce 富文本编辑器自定义图片上传
2020-11-24 09:41:20

vue-tinymce 封装了el-upload 控件，支持富文本编辑器自定义图片上传整合。复制到vue的src/components文件夹下详情博文介绍见：https://xingyun.blog.csdn.net/article/details/102492921

收起
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2021-01-21 16:12:25

本文实例讲述了TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法。分享给大家供大家参考，具体如下：最近项目里要添加编辑器，以为CKeditor比较出名，所以研究了一下。。。 1、下载编辑器什么的不用说了 2、...

收起
PHPMyWind更换编辑器ckeditor批量上传图片
2020-09-29 14:58:45

PHPMyWind更换编辑器ckeditor批量上传图片。以demo的方式展示，清晰易懂！整个文件代码可以直接复用，复用性强！

收起
ckeditor上传图片,上传文件
2019-01-10 17:56:21

ckeditor编辑器上传图片,文件,并且里面附带工具显示按钮

收起
Bootstrap中的fileinput 多图片上传及编辑功能
2020-09-01 17:15:05

主要介绍了Bootstrap中的fileinput 多图片上传及编辑功能的实现,非常不错，具有参考借鉴价值，需要的朋友可以参考下

收起
froala-editor-multiple-files-upload-plugin:Froala编辑器的多个文件上传插件
2021-05-11 04:23:59

Froala编辑器多个文件上传插件 ================ 覆盖文件上传插件的相同选项。 { allowedFileTypes: ["*"], fileDeleteUrl: "", fileDeleteParams: {}, fileUploadParams: {}, fileUploadURL: ...

收起

JavaScript
asp.net 使用ckeditor5富文本编辑器包含图片上传全部代码
2021-03-11 22:39:12

asp.net 使用ckeditor5富文本编辑器包含图片上传全部代码

收起
带图片上传文件上传的CKEditor（java实现后台文件存储）
2019-08-13 01:32:57

NULL 博文链接：https://bnmnba.iteye.com/blog/2311249

收起

使用富文本编辑器wangEditor完成图片文件的上传

千次阅读 2019-03-21 17:09:47

项目中一些特定的功能可能需要在页面中用到富文本编辑器来实现文件的输入上传等等，在这里用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页面创建富文本编辑器：

使用一个div标签来代表编辑器输入框，在script中给这个div输入框添加编辑器模型
提交编辑的内容需要使用textarea标签，它是将输入内容转换成html代码然后提交，form包裹起来
script中先创建一个wangEditor对象，在最后用 editor.create()进行编辑器内容添加
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>

收起

展开全文

wangEditor

基于WebUploader实现单图片和多图片上传，上传回显，编辑加载，图片删除，位置切换以及基于PhotoSwipe框架...
2021-01-08 08:47:04

最近开发的项目使用到WebUploader作为图片上传组件，封装了图片上传的所有基本操作，且使用PhotoSwipe实现图片预览功能。 1.准备工作下载项目Github地址：https://github.com/tysxquan/suploader 使用demo目录下的...

收起
layui实现多图片上传并限制上传的图片数量
2020-12-13 17:31:53

//给图片添加删除 function mouseChange() { $[removed]("mouseenter mouseleave", ".file-iteme", function (event) { if (event.type === "mouseenter") { //鼠标悬浮 $(this).children(".info").fadeIn(...

收起
超好用的富文本编辑器，轻量级，不需要上传图片，视频，直接插入
2018-06-29 09:04:40

超好用的富文本编辑器，轻量级，不需要上传图片，视频，直接插入，没有异步上传等垃圾步骤，直转base64码-summernote-0.8.8下载，富文本编辑器下载

收起
FineUI上传文件到腾讯云cos对象存储.zip
2019-11-15 15:30:52

包含页面文件管理、文件新建、文件编辑、COS拖拽上传、COS插入外链文件，已实现文件增删改、插入外链文件、本地拖拽或点击上传文件、限制上传文件大小和格式、自动获取外链或上传文件大小、音视频时长，可以完全...

收起
Vue+elementUI实现多图片上传与回显功能（含回显后继续上传或删除）
2020-10-15 12:16:55

主要介绍了Vue+elementUI实现多图片上传与回显功能（含回显后继续上传或删除）,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

收起
ueditor编辑器整合七牛云图片上传demo
2019-01-11 15:06:26

百度编辑器ueditor结合七牛云图片上传相结合，修改本地上传到七牛云，只需改动核心文件Upload.class.php的配置引入即可使用。配置改为你自己七牛云的key值和地址，空间名。我的访问地址为私有空间的访问地址，如果你...

收起
Summernote实现图片上传功能的简单方法
2020-11-22 11:52:14

还是接着之前说过的最近...首先根据官方文档提供的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-fileupload、commons-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"

收起

展开全文

SSM Axios Element UI Ajax

多图片上传和取消上传（基于框架）
2018-12-03 18:13:40

有的弹框不能用，如果有发现问题的，私聊我哦，我万分感谢！

收起

UEditor编辑器自定义上传图片或文件路径的修改方法

YII中Ueditor富文本编辑器文件和图片上传的配置图文教程

为百度UE编辑器上传图片添加水印功能

kindeditor编辑器，可上传多图片，文件上传等功能

富文本编辑器CKEditor配置及图片上传配置

phpcms v9的后台编辑器无法上传图片的解决方法

微信小程序-拍照或选择图片并上传文件

flask-ckeditor-demo:Flask项目集成富文本编辑器CKeditor演示，实现了图片上传、文件上传、Flash上传等功能

FCKeditor编辑器添加图片上传功能及图片路径问题解决方法

多功能在线图片编辑器源码 加水印加文字修剪等 无需上传文件的多功能图片批量处理程序

vue-tinymce 富文本编辑器自定义图片上传

TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析

PHPMyWind更换编辑器ckeditor批量上传图片

ckeditor上传图片,上传文件

Bootstrap中的fileinput 多图片上传及编辑功能

froala-editor-multiple-files-upload-plugin:Froala编辑器的多个文件上传插件

asp.net 使用ckeditor5富文本编辑器包含图片上传全部代码

带图片上传文件上传的CKEditor（java实现后台文件存储）

使用富文本编辑器wangEditor完成图片文件的上传

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

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

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

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

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

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

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

基于WebUploader实现单图片和多图片上传，上传回显，编辑加载，图片删除，位置切换以及基于PhotoSwipe框架...

layui实现多图片上传并限制上传的图片数量

超好用的富文本编辑器，轻量级，不需要上传图片，视频，直接插入

FineUI上传文件到腾讯云cos对象存储.zip

Vue+elementUI实现多图片上传与回显功能（含回显后继续上传或删除）

ueditor编辑器整合七牛云图片上传demo

Summernote实现图片上传功能的简单方法

SSM-文件上传方案

文件上传方案

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

文件上传-二进制数据

通过Ajax发送二进制流数据

前端代码编写

文件上传-后端处理

后端代码编写

消息响应

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

后端开发-服务器职责

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

制作并启动文件服务器

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

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

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

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

后端代码

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

el-upload上传组件

el-upload事件处理

Axios发送文件上传请求

多图片上传和取消上传（基于框架）

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

多功能在线图片编辑器源码加水印加文字修剪等无需上传文件的多功能图片批量处理程序