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中的checkbox实现全选功能
Nov 17 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
vue中watch的用法汇总
Dec 28 Vue.js
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
vue使用过滤器格式化日期
Jan 20 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
如何封装Vue Element的table表格组件
Feb 06 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
vue3不同环境下实现配置代理
May 25 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 SQL之where语句生成器
2009/03/24 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
YII Framework教程之异常处理详解
2016/03/14 PHP
Windows2003下php5.4安装配置教程(IIS)
2016/06/30 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
window.showModalDialog使用手册
2007/01/11 Javascript
js 鼠标拖动对象 可让任何div实现拖动效果
2009/11/09 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
JavaScript必知必会(九)function 说起 闭包问题
2016/06/08 Javascript
AngularJS ng-change 指令的详解及简单实例
2016/07/30 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
微信小程序 swiper组件构建轮播图的实例
2017/09/20 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
2017/11/28 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
vue计算属性和监听器实例解析
2018/05/10 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
一篇文章看懂JavaScript中的回调
2021/01/05 Javascript
[44:22]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第一场 11.01
2020/11/02 DOTA
python 生成不重复的随机数的代码
2011/05/15 Python
在Python web中实现验证码图片代码分享
2017/11/09 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
python读写csv文件的方法
2019/08/13 Python
Python实现像awk一样分割字符串
2020/09/15 Python
python opencv角点检测连线功能的实现代码
2020/11/24 Python
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
建筑总经理岗位职责
2014/02/02 职场文书
建议书的格式
2014/05/12 职场文书
测控技术自荐信
2014/06/05 职场文书