Vue+axios+Servlet上传并显示图片

Posted on 2023-01-29 18:51  Capterlliar  阅读(167)  评论(0编辑  收藏  举报

做了和重写summernote插入图片的回调函数并上传图片到服务器一样的事,但是servlet

简介:summernote点击上传(或粘贴)图片,前端用axios以multipart/form-data的形式传到后端,servlet用3.0版本后自带的文件上传特性解析出来,然后存在本地;前端再引用本地路径加载图片,从而避免了html过长的问题。

1. 关于Servlet

收到request后处理的一个handler,servlet的本质是什么,它是如何工作的?

2. axios与原型链

说说原型(prototype)、原型链和原型继承

感觉是为了让每个对象都有一系列方法而采取的模式,类似于继承,但js中好像没有class的概念、

然后就可以理解:将axios全局挂载到VUE原型上:Vue.prototype.$http=Axios

VUE的axios的详细介绍和用法

顺带一提axios可以自动转换json对象

3. Node.js,Tomcat和Apache

都是web服务器,可以参考apache、node.js、nginx、tomcat的关系

这个问题来源于:

Tomcat是Apache组织在符合J2EE的JSP、Servlet标准下开发的一个JSP服务器    

4. 跨域问题

报错:Access to XMLHttpRequest at 'http://localhost:8080/somewords_war_exploded/Diary' from origin 'http://localhost:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

跨域问题:前端运行在8081,后端在8080,跨域了。跨域主要是浏览器不接受,服务器没问题,所以可以配置一个代理让服务器去做这件事。

像这样:vue 项目 proxy 跨域配置的理解

5. java.lang.NoClassDefFoundError: javax/servlet/http/HttpServlet

参见这篇,纯纯版本问题

6. Post请求的编码格式

Axios请求头中常见的Content-Type及其使用

json应该是最方便的,但servlet不支持,只能用multipart/form-data了

7. @MultipartConfig(location = "path",maxFileSize = 1024*1024*5)

multipart/form-data在servlet对应的注解

获取参数的时候有getParameter() 和 getPart() 两种方式,getParameter() 获取非文件,getPart() 获取文件。

location是在传输过程中临时文件的存放地址,请求结束会自动删除。

8. vue中ref的使用

1、给dom节点记上ref属性,可以理解为给dom节点起了个名字。

2、加上ref之后,在$refs属性中多了这个元素的引用。

3、通过vue实例的$refs属性拿到这个dom元素。

用来获取表单的值很方便。

后记:游戏新模式更了,那剩下一篇明天再写