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+vant实现购物车全选和反选功能
Nov 17 Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
Vue如何实现变量表达式选择器
Feb 18 Vue.js
原生JS封装vue Tab切换效果
Apr 28 Vue.js
解读Vue组件注册方式
May 15 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
Vue3中的Refs和Ref详情
Nov 11 Vue.js
vue里使用create, mounted调用方法
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日期时间函数的高级应用技巧
2009/05/16 PHP
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
php文件操作实例代码
2012/05/10 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
php+lottery.js实现九宫格抽奖功能
2019/07/21 PHP
js一组验证函数
2008/12/20 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
深入理解Java线程编程中的阻塞队列容器
2015/12/07 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
2016/06/09 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
ReactNative中使用Redux架构总结
2017/12/15 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
React SSR样式及SEO的实践
2018/10/22 Javascript
python 写的一个爬虫程序源码
2016/02/28 Python
Python使用pyodbc访问数据库操作方法详解
2018/07/05 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
施华洛世奇中国官网:SWAROVSKI中国
2020/06/16 全球购物
银行实习鉴定
2013/12/13 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
经典促销广告词大全
2014/03/19 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
应届毕业生自荐书
2014/06/18 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
2014年检验员工作总结
2014/11/19 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS
如何使用Python实现一个简易的ORM模型
2021/05/12 Python