1.1、添加upload文件夹
在webapps\Root文件夹下创建用于接收上传文件的upload文件夹
创建upload文件夹
1.2、修改conf\web.xml设置允许上传文件
<init-param>
<param-name>readonly</param-name>
<param-value>false</param-value>
</init-param>
1.3、启动tomcat服务器
Tomcat文件路径bin目录startup.bat
启动界面如下所示
之后登录http://localhost:8080/ 网址,显示Tomcat即为成功
之后往upload中放入图片,输入路径
效果如下图所示
二、后台开发
新建web项目，在pom.xml中添加依赖
<!-- 文件上传依赖 -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
<!-- servlet依赖，用于接收多媒体文件-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
</dependency>
<!--jersey跨服务器上传依赖-->
<dependency>
<groupId>com.sun.jersey</groupId>
<artifactId>jersey-client</artifactId>
<version>1.19</version>
</dependency>
<dependency>
<groupId>com.sun.jersey</groupId>
<artifactId>jersey-core</artifactId>
<version>1.19</version>
</dependency>application.yml配置上传文件的大小
#设置单个文件的大小，-1表示不限制，单位MB
max-file-size: 10MB
#设置单次请求的文件总大小，-1表示不限制，单位MB
max-request-size: 100MB因为我们启动8080已经占用了,所以这里我们要用8070
还有码写application.yml文件时注意空格,否则会出现配置错误
server:
port: 8070
spring:
servlet:
multipart:
#设置单个文件的大小，-1表示不限制，单位MB
max-file-size: 10MB
#设置单次请求的文件总大小，-1表示不限制，单位MB
max-request-size: 100MBJersey工具类
逻辑整理
package demo.utils;
import com.sun.jersey.api.client.Client;
import com.sun.jersey.api.client.WebResource;
import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;
import java.util.Date;
import java.util.Random;
/**
* 上传文件的工具类
*/
public class JerseyFileUploadUtil {
/**
* 上传文件
*
* @param file 要上传的文件
* @param serverUrl 文件服务器的路径,比如http://localhost:8080/upload
* @return
*/
public static String uploadFile(MultipartFile file, String serverUrl) throws IOException {
//第1步:给文件设置个名称,保证唯一
String fileName = null;
//获取当前时间的时间戳(毫秒数)
long timeStamp = new Date().getTime();
fileName=fileName+timeStamp;
//随机生成3位数,拼接到时间戳后面
Random r = new Random();//用于生成随机数对象
for (int i=0;i<3;i++){
// fileName= fileName +(int)(Math.random()*10);
fileName= fileName + r.nextInt(10);//生成一个0-10之间的随机整数
}
//获取原文件的后缀名
//获取原版文件的文件名,比如aaa.png
String sourceFileName = file.getOriginalFilename();
//获取文件的后缀名.png
String suffix = sourceFileName.substring(sourceFileName.lastIndexOf("."));//indexOf从左往右 lastIndexOf从右往左
fileName = fileName + suffix; //生成时间戳+3位随机数+后缀名,比如:245525665555265.png
//第2步:创建Jersey对象,进行文件上传
Client client = Client.create();
//想得到的效果:http://localhost:8080/upload/245525665555265.png
//serverUrl=http://localhost:8080/upload / fileName=245525665555265.png
WebResource webResource = client.resource(serverUrl+"/"+fileName);
//第3步:通过Jersey上传文件
webResource.put(String.class,file.getBytes());
//第4步:获取文件的路径
return fileName;
}
}
Controller
然后执行文件,如果出现下面执行错误,jdk版本不对
第一步 prom中版本更改,3.0.0改成2.6.3
第二步 
第三步
验证服务器启动成功,执行Demo类
三、前端开发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="assets/vue.min-v2.5.16.js"></script>
<script src="assets/axios.min.js"></script>
</head>
<body>
<div id="app">
<!-- 上传文件控件-->
<input type="file" @change="upload">
<img :src="imgUrl"/>
</div>
<script>
new Vue({
el: '#app',
data: {
imgUrl:null
},
methods: {
//上传文件
//上传文件要取到,所以用e来获取
upload(e){
var file = e.target.files[0];//获取要上传的文件
var formData=new FormData();
formData.append("file",file);
//通过axios发送请求
axios.post("http://localhost:8070/uploadFile",formData,{
'Content-type':'multipart/form-data'
}).then(response=>{
console.log(response.data);
this.imgUrl= response.data;
});
}
}
});
</script>
</body>
</html> 效果如图
同时文件夹中也要保存有
