SpringBoot+Jersey跨域文件上傳的實現(xiàn)示例
更新時間：2024年07月04日 10:23:20 作者：二十多歲想退休
在SpringBoot開發(fā)后端服務時,我們一般是提供接口給前端使用,本文主要介紹了SpringBoot+Jersey跨域文件上傳的實現(xiàn)示例,具有一定的參考價值,感興趣的可以了解一下
說明：本次所使用的
Spring內(nèi)置的tomcat端口號為8070
tomcat文件服務器端口號為8060
uni-ui的端口號為8080
一、需要的工具
- tomcat服務器——作為文件服務器
- Spring項目文件
二、創(chuàng)建過程
1.配置Tomcat服務器
1.1添加upload文件夾
在Tomcat目錄中你的webapps\Root文件夾下創(chuàng)建用于接收上傳文件的upload文件夾
1.2修改confi/web.xml設置允許上傳文件
<init-param>
<param-name>readonly</param-name>
<param-value>false</param-value>
</init-param>1.3修改Tomcat服務器的端口號
找到tomcat目錄/conf/server.xml，端口號改為8060
<Connector port="8060" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443" />1.4啟動Tomcat服務器
2.后臺開發(fā)
2.1新建Web項目，在pom.xml中添加依賴
<!-- 文件上傳:Begin -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
<!-- 文件上傳:End -->
<!--跨服務器上傳:Begin -->
<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>
<!--跨服務器上傳:End -->
<!-- servlet依賴，用于接收多媒體文件-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
</dependency>2.2application.yum配置上傳文件大小
server:
port: 8070
spring:
servlet:
multipart:
#設置單個文件的大小，-1表示不限制，單位MB
max-file-size: 10MB
#設置單次請求的文件總大小，-1表示不限制，單位MB
max-request-size: 100MB3.創(chuàng)建工具類
3.1Jersey工具類
package com.$2332.interviewer.server.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;
/**
* 跨服務器文件上傳工具類
*
* @author 陳高風
*
*/
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()+""; //將當前時間獲得的毫秒數(shù)拼接到新的文件名上
//隨機生成一個3位的隨機數(shù)
Random r = new Random();
for(int i=0; i<3; i++) {
newFileName += r.nextInt(10); //生成一個0-10之間的隨機整數(shù)
}
//獲取文件的擴展名
String orginalFilename = file.getOriginalFilename();
String suffix = orginalFilename.substring(orginalFilename.indexOf("."));
//創(chuàng)建jesy服務器，進行跨服務器上傳
Client client = Client.create();
//把文件關聯(lián)到遠程服務器
//例如：http://127.0.0.1:8080/ssm_image_server/upload/123131312321.jpg
WebResource resource = client.resource(serverUrl+"/"+newFileName+suffix);
//上傳
//獲取文件的上傳流
resource.put(String.class, file.getBytes());
//圖片上傳成功后要做的事兒
//1、ajax回調(diào)函數(shù)做圖片回顯（需要圖片的完整路徑）
//2、將圖片的路徑保存到數(shù)據(jù)庫（需要圖片的相對路徑）
// String fullPath = serverUrl+"/upload/"+newFileName+suffix; //全路徑
String relativePath = "/upload/"+newFileName+suffix; //相對路徑
return relativePath;
}
}3.2上傳文件controller層
package com.$2332.interviewer.server.controller;
import com.$2332.interviewer.server.utils.JesyFileUploadUtil;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
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
@RequestMapping("/upload")
@CrossOrigin(origins = "*")
public class UploadController {
@PostMapping("/file")
public String uploadFile(MultipartFile fileName){
String path = "";
try {
path = JesyFileUploadUtil.uploadFile(fileName, "http://localhost:8060/upload");
} catch (IOException e) {
e.printStackTrace();
}
return path;
}
}
4.前端頁面上傳
4.1傳統(tǒng)HTML+Vue方式
<!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>4.2uni-ui項目
上傳圖片
//上傳標題圖
uploadLogo(){
//等價代換替換this
_self = this
//第1步：打開手機相冊，或文件管理器選擇文件
uni.chooseImage({
count: 1, //允許上傳一個文件
sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認二者都有
sourceType: ['album'], //從相冊選擇
success: function (res) {
//獲得選擇好的文件，他是一個數(shù)組，就算只有一個文件，那也是數(shù)組中只有一個元素
const tempFilePaths = res.tempFilePaths;
//第2步：把選擇的文件上傳到服務器
const uploadTask = uni.uploadFile({
url: 'http://localhost:8070/upload/file',
filePath: tempFilePaths[0],
name: 'fileName',
success: (res) => {
console.log(res.data)
_self.btnLoading = true //讓按鈕的進度條顯示出來
_self.btnState = true //讓按鈕不可點擊
_self.formData.logoPath = res.data
_self.btnLoading = false
}
})
//獲取文件的上傳進度
uploadTask.onProgressUpdate(function(res){
console.log('上傳進度：'+res.progress)
console.log('已經(jīng)上傳的數(shù)據(jù)長度：'+res.totalBytesSent)
console.log('預計需要上傳的數(shù)據(jù)總長度：'+res.totalBytesExpectedToSend)
})
}
})
},上傳附件
uploadAttachment() {
_self = this
//第一步：打開文件選擇器
uni.chooseFile({
count: 1, //上傳文件的數(shù)量
extension: ['.pdf', '.doc', '.xlsx'],
success: function(res) {
//獲取選擇好的文件，他是一個數(shù)組，就算只有一個文件，那也是數(shù)組中的一個元素
const tempFilePaths = res.tempFilePaths
//第二步，把選擇好的文件上傳到服務器
uni.uploadFile({
url: 'http://localhost:8070/upload/file', //上傳到Spring托管的服務器
filePath: tempFilePaths[0], //添加選擇好的文件
name: 'fileName',
success: (res) => {
console.log(res.data)
_self.btnLoading1 = true //讓按鈕的進度條顯示出來
_self.btnState1 = true //讓按鈕不可點擊
_self.formData.attachmentPath = res.data
_self.btnLoading1 = false
}
})
}
});
}到此這篇關于SpringBoot+Jersey跨域文件上傳的實現(xiàn)示例的文章就介紹到這了,更多相關SpringBoot Jersey跨域上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
我們知道在java連接數(shù)據(jù)庫之后,需要數(shù)據(jù)庫的sql語句,下面這篇文章主要給大家介紹了關于java中復雜查詢sql語句該怎么寫的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
SpringBoot異常處理器的使用與添加員工功能實現(xiàn)流程介紹
設計完了登錄與退出功能還只完成了冰山一角，經(jīng)過測試發(fā)現(xiàn)，我們以url的方式來訪問網(wǎng)站時可以直接跳過登陸頁面進入后臺頁面，這樣顯然是不合理的，下面我們通過異常攔截器+boot來做到訪問限制，以及實現(xiàn)新增員工功能，制作全局異常處理器2022-10-10
枚舉就是用enum修飾是一種Java特殊的類，枚舉是class、底層是繼承了java.lang.Enum類的實體類。本文將詳解枚舉的定義與使用，需要的可以參考一下2022-06-06
這篇文章主要介紹了IDEA中Web項目控制臺亂碼的問題及解決方法，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-08
這篇文章主要為大家詳細介紹了Springboot打印接口的三種方式：aop切面的方式、過濾器的方式和攔截器的方式，感興趣的可以跟隨小編一起學習一下2022-08-08
這篇文章主要介紹了JavaFX桌面應用開發(fā)-Group（容器組），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
mybatis?like模糊查詢特殊字符報錯轉(zhuǎn)義處理方式
這篇文章主要介紹了mybatis?like模糊查詢特殊字符報錯轉(zhuǎn)義處理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
在Java編程中,文件處理是一項常見的任務,為了提高文件處理的效率,我們可以使用多線程技術(shù),本文將詳細介紹如何使用Java多線程來處理文件,需要的可以參考下2024-12-12
Mybatis中的PageHelper的執(zhí)行流程分析
這篇文章主要介紹了Mybatis的PageHelper執(zhí)行流程，本文給大家介紹介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-02-02
JAR文件是一種壓縮文件,與常見的ZIP壓縮文件兼容,被稱為JAR包,下面這篇文章主要給大家介紹了關于使用IDEA打jar包的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-08-08