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的mixin策略
Nov 19 Vue.js
Vue如何实现验证码输入交互
Dec 07 Vue.js
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
如何封装Vue Element的table表格组件
Feb 06 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
vue修饰符.capture和.self的区别
Apr 22 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 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设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
JS实现自适应高度表单文本框的方法
2015/02/25 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
2015/05/25 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
Python的Django框架下管理站点的基本方法
2015/07/17 Python
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
python中redis的安装和使用
2016/12/04 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
Python之修改图片像素值的方法
2019/07/03 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
Python列表list操作相关知识小结
2020/01/29 Python
HTML5和CSS3实例教程总结(推荐)
2016/07/18 HTML / CSS
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
搞笑车尾标语
2014/06/23 职场文书
公司活动总结范文
2014/07/01 职场文书
村安全生产责任书
2014/08/25 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
教师工作表现自我评价
2015/03/05 职场文书
个人简历求职信范文
2015/03/20 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
教师节祝酒词
2015/08/11 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
Python下opencv库的安装过程及问题汇总
2021/06/11 Python
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android
create-react-app开发常用配置教程
2022/06/25 Javascript
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS
mysql数据库如何转移到oracle
2022/12/24 MySQL