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 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
vue keep-alive的简单总结
Jan 25 Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
vue修饰符.capture和.self的区别
Apr 22 Vue.js
vue递归实现树形组件
Jul 15 Vue.js
Vue router配置与使用分析讲解
Dec 24 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数据库操作类代码(增,删,改,查)
2013/04/08 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
详谈PHP文件目录基础操作
2014/11/11 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
2010/10/17 Javascript
xss文件页面内容读取(解决)
2010/11/28 Javascript
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
2013/11/07 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
JS随机调用指定函数的方法
2015/07/01 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
js在HTML的三种引用方式详解
2020/08/29 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
实例Python处理XML文件的方法
2015/08/31 Python
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
Python基于列表list实现的CRUD操作功能示例
2018/01/05 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
武汉世纪畅想数字传播有限公司 .NET笔试题
2015/06/13 面试题
临床护理求职信
2014/04/26 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
大学生个人总结范文
2015/02/15 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript
《战锤40K:暗潮》跳票至9月 公布新宣传片
2022/04/03 其他游戏