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 02 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
vue中 this.$set的使用详解
Nov 17 Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 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通过header实现文本文件下载的代码
2010/08/08 PHP
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
2016/05/11 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
解决bootstrap-select 动态加载数据不显示的问题
2018/08/10 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
vue-router结合vuex实现用户权限控制功能
2019/11/14 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
python生成式的send()方法(详解)
2017/05/08 Python
使用Python写一个小游戏
2018/04/02 Python
python机器学习之神经网络实现
2018/10/13 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
详解Django-restframework 之频率源码分析
2019/02/27 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
Python是怎样处理json模块的
2020/07/16 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
css3实现平移效果(transfrom:translate)的示例
2020/11/13 HTML / CSS
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
普通院校学生的自荐信
2013/11/27 职场文书
八年级语文教学反思
2014/02/11 职场文书
难忘的一天教学反思
2014/04/30 职场文书
2015年公司工作总结
2015/04/25 职场文书
2015年支教教师工作总结
2015/07/22 职场文书
党员心得体会范文2016
2016/01/23 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle