Java处理wangeditor上传图片并升级一下
2024-05-19 09:10:41
wangeditor上传图片
1.在页面上设置富文本编辑器
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="static/js/jquery-3.5.1.js"></script> <!--jquery拿来备用-->
<script src="static/js/wangEditor.min.js"></script> <!--引入wangEditor的js文件-->
<title>Insert title here</title>
</head>
<body><span>WANGEDITOR富文本编辑器</span><br><div id="myeditor" style="height: 600px;width: 800px"><p>默认的值</p></div>
<script>const E = window.wangEditorconst editor = new E('#myeditor') /*为富文本编辑器绑定显示的div容器*/editor.config.uploadImgServer = '${pageContext.request.contextPath}/upload_img.do';editor.config.uploadFileName = 'file';/*设置编辑器上传文件的请求接口，和参数名称*/editor.create() //创建wangeditor编辑器
</script>
</body>
</html>
2.wangeditor的上传图片返回格式的要求（官方文档）
接口返回格式，重要
接口要返回 application/json 格式，格式要求如下：
必须返回如下格式，图片才会回显，需要构造一个Vo类
{// errno 即错误代码，0 表示没有错误。// 如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理"errno": 0,// data 是一个数组，返回图片Object，Object中包含需要包含url、alt和href三个属性,它们分别代表图片地址、图片文字说明和跳转链接,alt和href属性是可选的，可以不设置或设置为空字符串,需要注意的是url是一定要填的。"data": [{url: "图片地址",alt: "图片文字说明",href: "跳转链接"},{url: "图片地址1",alt: "图片文字说明1",href: "跳转链接1"},"……"]
}
wangEditor返回包装类
public class WangEditorVO {//错误码private Integer errno;//data数据private Object data;public Integer getErrno() {return errno;}public Object getData() {return data;}public static WangEditorVO success(Object data) {WangEditorVO wangEditorVO = new WangEditorVO();wangEditorVO.errno = 0;wangEditorVO.data = data;return wangEditorVO;}public static WangEditorVO error(Integer errno, Object data) {WangEditorVO wangEditorVO = new WangEditorVO();wangEditorVO.errno = errno;wangEditorVO.data = data;return wangEditorVO;}
}
3.编写上传图片接口（使用springMVC）
/*** * @ClassName: TestController * @Description:TODO(描述这个类的作用) * @author: 你的名字* @date: 2021年9月16日 上午9:44:26 * @Copyright:*/
@Controller
public class TestController {/*上传图片接口*/@RequestMapping("/upload_img.do")@ResponseBodypublic WangEditorVO UploadFileInWangEditor(@RequestParam("file") MultipartFile file) throws IllegalStateException, IOException { //接收上传的图片String oldname = file.getOriginalFilename();//保存到项目的upload目录下file.transferTo(new File("E:\\vc++\\AllAnnoationTest\\WebContent\\upload","fucking"+oldname));List<String> list = new ArrayList<String>();//因为回显的图片使用src属性，必须使用url形式，不能使用绝对路径String resource = "http://localhost:8082/AllAnnoationTest/upload/fucking"+oldname;//放入list集合list.add(resource);return WangEditorVO.success(list); //创建Vo类并传入data属性，然后返回}}
4.测试，查看网页的控制台
5.升级，保存带图片的文章，（全注解JPA）
将内容保存到数据库中去（全注解使用JPA)
编写主配Class，DataSourceConfig
/*** * @ClassName: DataSourceConfig * @Description: 配置数据源 * @author: 你的名字* @date: 2021年9月17日 下午7:20:16 * @Copyright:*/
@Configuration
@EnableAspectJAutoProxy() //开启自动代理
@EnableTransactionManagement //开启注解事务
public class DataSourceConfig {/*配置C3P0数据源*/@Beanpublic DataSource dataSource() throws PropertyVetoException {ComboPooledDataSource datasource = new ComboPooledDataSource();datasource.setJdbcUrl("jdbc:mysql://localhost:3306/jpatest?useSSL=true&useUnicode=true&CharacterEncoding=UTF-8&serverTimeZone=UTC");datasource.setDriverClass("com.mysql.cj.jdbc.Driver");datasource.setUser("root");datasource.setPassword("XXXXXXXXXXXXXXXXX");return datasource;}/*** * @Title: entityManagerFactory * @Description: 配置entityManageFatory(SessionFactory) Session工厂 * @param: @return* @param: @throws PropertyVetoException * @return: LocalContainerEntityManagerFactoryBean * @throws*/@Beanpublic EntityManagerFactory entityManagerFactory() throws PropertyVetoException {LocalContainerEntityManagerFactoryBean enFactory = new LocalContainerEntityManagerFactoryBean();enFactory.setDataSource(dataSource());//设置JPA的Hibernate适配器HibernateJpaVendorAdapter vendorAdapter = new HibernateJpaVendorAdapter();vendorAdapter.setGenerateDdl(true);//扫描实体类所在的包enFactory.setJpaVendorAdapter(vendorAdapter);enFactory.setPackagesToScan("com.anno.pojo");//设置JPA的一些特性信息Properties properties = new Properties();properties.put("hibernate.show_sql", "true");properties.put("hibernate.format_sql", "true");properties.put("hibernate.dialect", "org.hibernate.dialect.MySQL8Dialect");properties.put("hibernate.hbm2ddl.auto", "update");enFactory.setJpaProperties(properties);enFactory.afterPropertiesSet();//用spring提供的转型转为符合JPA规范的EntityManageFactory接口的方法转型然后返回return enFactory.getObject();}/*配置事务管理器*/@Beanpublic PlatformTransactionManager transactionManager() throws PropertyVetoException {JpaTransactionManager manager = new JpaTransactionManager();manager.setEntityManagerFactory(entityManagerFactory());//设置JPA的事务管理器，注入Session工厂，（EntityManageFactory）return manager;}}
（PS.WebMvc的配置）
/*** * @ClassName: WebMvcConfig * @Description:配置SpringMVC* @author: 黎翰* @date: 2021年9月16日 上午9:29:51 * @Copyright:*/
@Configuration
@ComponentScan("com.anno")
@EnableWebMvc
public class WebMvcConfig implements WebMvcConfigurer {/**** 通过注解 @Bean 初始化视图解析器* @return ViewResolver 视图解析器*/@Bean(name="internalResourceViewResolver")public ViewResolver initViewResolver() {InternalResourceViewResolver viewResolver =new InternalResourceViewResolver();viewResolver.setPrefix("");viewResolver.setSuffix(".jsp");return viewResolver;}/*** 初始化RequestMappingHandlerAdapter，并加载Http的Json转换器* @return RequestMappingHandlerAdapter 对象*/@Bean(name="requestMappingHandlerAdapter") public HandlerAdapter initRequestMappingHandlerAdapter() {//创建RequestMappingHandlerAdapter适配器RequestMappingHandlerAdapter rmhd = new RequestMappingHandlerAdapter();// HTTP JSON转换器MappingJackson2HttpMessageConverter jsonConverter = new MappingJackson2HttpMessageConverter();//MappingJackson2HttpMessageConverter接收JSON类型消息的转换MediaType mediaType = MediaType.APPLICATION_JSON_UTF8;List<MediaType> mediaTypes = new ArrayList<MediaType>();mediaTypes.add(mediaType);//加入转换器的支持类型jsonConverter.setSupportedMediaTypes(mediaTypes);//往适配器加入json转换器rmhd.getMessageConverters().add(jsonConverter);return rmhd;}/*** * @Title: commonsMultipartResolver * @Description: 配置上传文件解析器 * @param: @return * @return: CommonsMultipartResolver * @throws*/@Beanpublic CommonsMultipartResolver multipartResolver() {CommonsMultipartResolver resolver = new CommonsMultipartResolver();resolver.setDefaultEncoding("UTF-8");resolver.setMaxInMemorySize(1024*1024*10);resolver.setMaxUploadSize(1024*1024*20);return resolver;}@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/static/**").addResourceLocations("/static/");registry.addResourceHandler("/upload/**").addResourceLocations("/upload/");WebMvcConfigurer.super.addResourceHandlers(registry);}}
WebInit配置（代替的Web.xml）
/*** * @ClassName: WebInit * @Description: 代替了Web.xml文件 * @author: 黎翰* @date: 2021年9月16日 上午9:16:38 * @Copyright:*/
public class WebInit extends AbstractAnnotationConfigDispatcherServletInitializer{@Overrideprotected Class<?>[] getRootConfigClasses() {return null;}@Overrideprotected Class<?>[] getServletConfigClasses() {return new Class[] {WebMvcConfig.class};}@Overrideprotected String[] getServletMappings() {return new String[] {"*.do"};}@Overridepublic void onStartup(ServletContext servletContext) throws ServletException {servletContext.addFilter("encodingFilter", MyencodingFilter.class).addMappingForUrlPatterns(null, false, "/*");//必须调用父类的onStarup不然DispatchServlet不会加载super.onStartup(servletContext);}}
dao层：
/*** * @ClassName: ArticleDaoImpl * @Description:文章Dao的实现类* @author: 黎翰* @date: 2021年9月17日 下午8:04:11 * @Copyright:*/
@Repository
public class ArticleDaoImpl implements ArticleDao{@PersistenceContextprivate EntityManager entityManager;//Session@Overridepublic void SaveArticle(Article article) {entityManager.persist(article);}@Overridepublic Article getArticle(Integer id) {return entityManager.find(Article.class, id);}}
service层：
@Service
public class ArticleService {@Autowiredprivate ArticleDao articleDao;@Transactionalpublic void SaveArticle(Article article) {articleDao.SaveArticle(article);}public Article getArticle(Integer id) {return articleDao.getArticle(id);}}
pojo:
/*** * @ClassName: Article * @Description:保存输入的文章pojo * @author: 黎翰* @date: 2021年9月17日 下午7:25:27 * @Copyright:*/
@Entity
@Table(name="t_article")
public class Article {@Id@GeneratedValue(strategy=GenerationType.IDENTITY)@Column(name="a_id")private Integer id;@Column(name="a_title")private String title;@Column(name="a_auther")private String auther;@Column(name="a_context",length=500)private String context;//-------------------省略Getter&Setter方法}
控制层：
@RequestMapping("/submitArticle.do")
@ResponseBody
public String submitArticle(Article article) {//调用业务层保存到数据库里去articleService.SaveArticle(article);System.out.println("标题为"+article.getTitle());System.out.println("作者为"+article.getAuther());System.out.println("内容为"+article.getContext());return "提交成功";
}
页面：
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="static/js/jquery-3.5.1.js"></script>
<script src="static/js/wangEditor.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<span>WANGEDITOR富文本编辑器--------------------------------------------------</span><br>
<span>标题</span><input id="theTitle" type="text" name="title" /><br>
<span>作者</span><input id="theAuther" type="text" name="auther" />
<div id="myeditor" style="height: 600px;width: 800px"><p>默认的值</p>
</div>
<script>const E = window.wangEditorconst editor = new E('#myeditor')editor.config.uploadImgServer = '${pageContext.request.contextPath}/upload_img.do';editor.config.uploadFileName = 'file';editor.create();
</script>
<!-- 用一个按钮来提交AJAX,帮个AJAX函数 -->
<input id="sub" type="button" οnclick="AJAXsubmit()" value="提交文章">
<script>var AJAXsubmit = function(){$.ajax({url:"${pageContext.request.contextPath}/submitArticle.do",type:"POST",data:{"title":$('#theTitle').val(),"auther":$('#theAuther').val(),"context":editor.txt.html()},success:function(result){alert(result);}});}
</script>
</body>
</html>
测试：
6.查看保存的文章，是否能正常显示图片
前提：和Spring和整合Hibernate一样，Spring为Hibernate提供了OpenSessionInViewFilter(懒加载拦截器)
让Hibernate的懒加载机制，能够在视图层才发送sql语句进行查询，
Spring也为JPA提供了类似的懒加载拦截器，可以在spring-orm包的jpa子包中看到
现在需要配置上Filter,在WebInit类中注册EntityManageInViewFilter,
@Overridepublic void onStartup(ServletContext servletContext) throws ServletException {//自定义的字符编码过滤器servletContext.addFilter("encodingFilter", MyencodingFilter.class).addMappingForUrlPatterns(null, false, "/*");//配置懒加载拦截器servletContext.addFilter("openEntityManagerInView", OpenEntityManagerInViewFilter.class).addMappingForUrlPatterns(null, false, "/*");//必须调用父类的onStarup不然DispatchServlet不会加载super.onStartup(servletContext);}
现在编写请求，将数据库里的文章显示出来
@RequestMapping("/testaction.do")public String test1(Model model) {//调用业务对象，查询t_article的指定id文章Article myarticle = articleService.getArticle(2);model.addAttribute("myarticle", myarticle);return "success";}
在页面里显示一下：
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body><span>标题:</span>${myarticle.title}<br><span>作者:</span>${myarticle.auther}<br>${myarticle.context}
</body>
</html>
```Java处理wangeditor上传图片并升级一下相关推荐
- java对象头_我的并发编程（二）：java对象头以及synchronized升级过程
一.概述 研究java对象头的目的是详细分析Java的synchronized锁的升级过程,因为synchronized在锁升级的时候,就是依赖对象头的信息来决定的.本博文针对64位的操作系统来对Ja ...
- mysql biginteger java_java.math.BigInteger cannot be cast to java.lang.Integer以及mysql升级的问题...
java.math.BigInteger cannot be cast to java.lang.Integer以及mysql升级的问题 Mysql 8.0 原因是mysql升级到8.0,数据库驱动使 ...
- wangeditor: 上传图片+上传视频+上传附件(自定义)完整使用
wangeditor: 上传图片+上传视频+上传附件(自定义)完整使用 一:项目需求:①角色为管理员可以新增编辑文章 + ②点击可以看文章详情 +③ 角色为管理员可以修改编辑文章 二:效果: ①角色为 ...
- laravel-admin扩展wang-Editor上传图片设置
背景 laravel-admin扩展wang-Editor上传图片默认是按BASE64保存,保存的数据太长,需设置保存到服务器本地或云存储. 设置 // config/admin/php'extens ...
- java练习--实现会员注册升级
java练习–实现会员注册升级 提示:这里记录一下同类型文章的改进版: https://blog.csdn.net/gengzhi1293443962/article/details/52598061 ...
- WangEditor上传图片 失败
WangEditor 上传图片失败问题 最近接触了一下富文本编辑器 Wangeditor 基本能满足一些文本的写入但是在上传图片的时候总是发生一些错误.分享一下我的解决历程吧,可能我是个菜鸡,有不对的 ...
- java 浏览器访问图片不显示_[Java教程]重新上传图片后 地址不变 浏览器加载不到的问题...
[Java教程]重新上传图片后 地址不变 浏览器加载不到的问题 0 2016-05-27 07:00:50 做项目的时候遇到一个问题: 上传文件以后,相同的地址,第一次加载没有问题,当你操作次数过快, ...
- wangEditor 上传图片，回调函数 Cannot read properties of undefined
请看我的代码: editor.config.uploadImgHooks = {// 上传图片之前before:function(xhr){console.log(this.state.goodsgu ...
- SpringBoot+WangEditor上传图片
今天本地在调试一个问题,,wangEditor这个富文本编辑器上传图片,其实上传图片到也没有什么困难的地方,关键是在于,后台是SpringBoot来进行接收图片,,不说了直接上代码:这个是前端的代码: ...
- java arraylist线程安全_ArrayList升级为线程安全的List
我们都熟知在高并发的场景下,ArrayList是线程不安全的,JDK Collections接口提供线程安全的操作,本文通过代码演示下,最后查看源码分析下为何是线程安全的. ArrayList升级为线 ...
最新文章
- 1024 Palindromic Number
- Yahoo Programming Contest 2019 F - Pass
- UI组件之AdapterView及其子类关系，Adapter接口及其实现类关系
- Oracle 中UNDO与REDO的差别具体解释
- 四步相移法怎么获得相位信息_不一样的费曼学习法！|高中篇|”
- C#中yield关键字及注意事项
- Java设计模式之接口型模式总结
- 假设法求最大值和数组的优点
- Layui Ajax请求时加上 load 加载效果
- python爬虫之urllib
- 现代通信技术之分组交换技术
- 蓝星微商城源码+搭建教程源码
- 万字长文带来2021最稳C/C++学习路线
- java集合优秀率怎么算,优秀率怎么算(及格率和优秀率公式)
- python计算圆面积_Python习题册004:计算圆面积
- ubuntu16.04 双显卡 安装N卡驱动
- python 离散点 等高线_Matplotlib中的散点图等高线
- 东北四省赛E-Minimum Spanning Tree-贡献求和
- 微信开发者工具配置服务器信息,微信开发者中心如何配置
- 时间序列模型预测_时间序列预测，使用facebook先知模型预测股价