vue form表单post请求结合Servlet实现文件上传功能


Posted in Vue.js onJanuary 22, 2021

前端测试页面代码:

<template>
 <div>
  <input type="file" name="file" @change="change($event)">
 </div>
</template>
<script>
 export default {
  created(){
   this.path = this.$route.query;
   for (let i in this.path) {
    this[i] = decodeURIComponent(this.path[i]);
   }
  },
  methods:{
   change(ev){
    let file = ev.target.files[0];
    let size = file.size;
    let name = file.name;
    if(size > 314572800){
     this.$message.warning('上传文件不能超过300M');
     return;
    }
    let formData = new FormData();
    formData.append('file',file,name)
    this.$axios.post('/JT3'+this.getddRecordDelete,formData,{
     headers:{"Content-Type":"multipart/form-data"}
    }).then(data=>{
     console.log(data);
    })
   }
  }
 }
</script>
<style scoped>
</style>

后端servlet接收代码

package jt3.control.zygkh;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem; 
import org.apache.commons.fileupload.FileUploadException; 
import org.apache.commons.fileupload.disk.DiskFileItemFactory; 
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import jtacc.filter.JTKit;
import jtacc.jtpub.DT; 
@WebServlet(urlPatterns = "/upfile/file") 
public class UploadServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println(11);
		this.doPost(request, response);
 }
 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 	String uri="/u/file/"+DT.getFormatDate("yyyyMMdd")+"/"; //定义路径
 	String tmpPath=JTKit.getBaseDIR()+uri;//此处为个人项目路径,根据需求定义路径
 	DiskFileItemFactory factory = new DiskFileItemFactory();
		factory.setRepository(new File(tmpPath));//临时文件存储路径
		ServletFileUpload fileUpload = new ServletFileUpload(factory);//核心操作对象
		fileUpload.setHeaderEncoding("utf-8");//防乱码
		try {
			//此处如果要实时强行转换则需要下载jar包(commons-fileupload-1.3.3.jar)
			List<FileItem> list = fileUpload.parseRequest(request);
			for (FileItem fileItem : list) {
				InputStream in = fileItem.getInputStream();
				String filename = fileItem.getName();
				if (fileItem != null) {
					System.out.println(filename);
					int len = 0;
					byte[] array = new byte[1024];
					FileOutputStream fos = new FileOutputStream(tmpPath+filename);
					while((len = in.read(array))!=-1){//表示每次最多读1024个字节
						fos.write(array,0,len);
						fos.flush();
					}
					fos.close();
					in.close();
					fileItem.delete();
					response.setCharacterEncoding("UTF-8");
					String realPath = uri+filename;
					response.getWriter().append(realPath);
				}
			}
		} catch (FileUploadException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
 }
 
}

测试结果

vue form表单post请求结合Servlet实现文件上传功能

补充:Servlet获取表单提交过来的数据

在Servlet的doPost方法:

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}

中获取表单数据,首先,为了防止出现中文乱码问题,需要给request设置编码为“UTF-8”:

request.setCharacterEncoding("utf-8");

获取单个字符串的方式:

<pre style="font-family: 宋体; font-size: 12pt; background-color: rgb(255, 255, 255);"><span style="font-size:18px; font-family: Arial, Helvetica, sans-serif; background-color: rgb(240, 240, 240);">String username = request.getParameter("username");</span>

获取字符串数组的方式:

String[] favorites = request.getParameterValues("favorite");

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。如有错误或未考虑完全的地方,望不吝赐教。

Vue.js 相关文章推荐
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
基于vue的video播放器的实现示例
Feb 19 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
一篇文章学会Vue中间件管道
Jun 20 Vue.js
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
vue实力踩坑之push当前页无效
Apr 10 Vue.js
vue使用watch监听属性变化
Apr 30 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 #Vue.js
Vue仿Bibibili首页的问题
Jan 21 #Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 #Vue.js
Vue看了就会的8个小技巧
Jan 21 #Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 #Vue.js
详解实现vue的数据响应式原理
Jan 20 #Vue.js
vue实现简易计算器功能
Jan 20 #Vue.js
You might like
PHP仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
php多维数组去掉重复值示例分享
2014/03/02 PHP
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
深究AngularJS中$sce的使用
2017/06/12 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
js实现百度登录窗口拖拽效果
2020/03/19 Javascript
javascript实现打砖块小游戏(附完整源码)
2020/09/18 Javascript
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
Python中的CURL PycURL使用例子
2014/06/01 Python
Linux下Python获取IP地址的代码
2014/11/30 Python
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
对于Python中RawString的理解介绍
2016/07/07 Python
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
python numpy 显示图像阵列的实例
2018/07/02 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
Python for循环与getitem的关系详解
2020/01/02 Python
python与js主要区别点总结
2020/09/13 Python
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
经济学人订阅:The Economist
2018/07/19 全球购物
澳大利亚个性化儿童礼品网站:Bright Star Kids
2019/06/14 全球购物
函授毕业自我鉴定
2013/12/19 职场文书
贷款委托书怎么写
2014/08/02 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
技术经济专业求职信
2014/09/03 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis
Python进程间的通信之语法学习
2022/04/11 Python