当前位置：首页 > news >正文

SpringBoot+jersey跨域文件上传

news 2025/8/25 7:35:42

一、配置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表示不限制，单位MBmax-file-size: 10MB#设置单次请求的文件总大小，-1表示不限制，单位MBmax-request-size: 100MB

Jersey工具类

package demo.util;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;/*** 跨服务器文件上传工具类** @author qin**/
public class JesyFileUploadUtil {/*** 上传文件** @param file --文件名* @param serverUrl --服务器路径http://127.0.0.1:8080/ssm_image_server* @return* @throws IOException*/public static String uploadFile(MultipartFile file, String serverUrl) throws IOException {//重新设置文件名String newFileName = new Date().getTime()+""; //将当前时间获得的毫秒数拼接到新的文件名上//随机生成一个3位的随机数Random r = new Random();for(int i=0; i<3; i++) {newFileName += r.nextInt(10); //生成一个0-10之间的随机整数}//获取文件的扩展名String orginalFilename = file.getOriginalFilename();String suffix = orginalFilename.substring(orginalFilename.indexOf("."));//创建jesy服务器，进行跨服务器上传Client client = Client.create();//把文件关联到远程服务器//例如：http://127.0.0.1:8080/ssm_image_server/upload/123131312321.jpgWebResource resource = client.resource(serverUrl+"/"+newFileName+suffix);//上传//获取文件的上传流resource.put(String.class, file.getBytes());//图片上传成功后要做的事儿//1、ajax回调函数做图片回显（需要图片的完整路径）//2、将图片的路径保存到数据库（需要图片的相对路径）
//        String fullPath = serverUrl+"/upload/"+newFileName+suffix; //全路径String relativePath = "/upload/"+newFileName+suffix; //相对路径return relativePath;}
}

Controller

	@RequestMapping("/uploadFile")@CrossOrigin(origins = "*")public String upload(MultipartFile fileName){String url = "http://localhost:8080/upload";String path = "";try {path = JesyFileUploadUtil.uploadFile(fileName, url);} catch (IOException e) {e.printStackTrace();}return path;}

三、前端开发

<!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" /></div><script>new Vue({el: '#app',data: {},methods: {Upload(event){const flie = event.target.files[0];// 在这里进行一系列的校验const formData = new FormData();formData.append("fileName",flie);axios.post('http://localhost:8070/uploadFile',formData,{'Content-type' : 'multipart/form-data'}).then(res=>{console.log(res.data);},err=>{console.log(err)})}}});</script>
</body>
</html>