使用Jersey实现跨域文件上传
配置tomcat服务器
1.1、添加upload文件夹
在webapps\Root文件夹下创建用于接收上传文件的upload文件夹
1.2、修改conf\web.xml设置允许上传文件
<init-param>
<param-name>readonly</param-name>
<param-value>false</param-value>
</init-param>
1.3、启动tomcat服务器
后台开发
新建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配置上传文件的大小
server:
port: 8070
spring:
servlet:
multipart:
#设置单个文件的大小,-1表示不限制,单位MB
max-file-size: 10MB
#设置单次请求的文件总大小,-1表示不限制,单位MB
max-request-size: 100MB
Jersey工具类
package com.example.uploaddemo.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 + r.nextInt(10);//生成一个0-10之间的随机整数
}
//获取原文件的后缀名
String sourceFileName = file.getOriginalFilename();
//获取文件的后缀名.png
String suffix = sourceFileName.substring(sourceFileName.lastIndexOf("."));
fileName = fileName + suffix;//时间戳+3位随机数+后缀名,比如:24143514515315125.png
//第2步:创建Jersey相关对象,进行文件上传
Client client = Client.create();
//想得到的效果:http://localhost:8080/upload/24143514515315125.png
WebResource webResource = client.resource(serverUrl + "/" + fileName);
//第3步:上传文件
webResource.put(String.class,file.getBytes());
//第4步:返回文件的路径
return fileName;
}
}
Controller
package com.example.uploaddemo.controller;
import com.example.uploaddemo.utils.JerseyFileUploadUtil;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;
@RestController
public class FileController {
@RequestMapping("/uploadFile")
@CrossOrigin(origins = "*")
public String upload(MultipartFile file){
String fileName = null;
String servelUrl = "http://192.168.2.58:8080/upload";
try {
fileName = JerseyFileUploadUtil.uploadFile(file, "http://192.168.2.58:8080/upload");
} catch (IOException e) {
e.printStackTrace();
}
return servelUrl + "/" +fileName;
}
}
前端开发
<!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:{
//上传文件
upload(e){
var file = e.target.files[0];//获取要上传的文件
var formData = new FormData();
formData.append("file",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>