SpringBoot+Jersey跨域文件上傳的實(shí)現(xiàn)示例

更新時(shí)間：2024年07月04日 10:23:20 作者：二十多歲想退休

在SpringBoot開發(fā)后端服務(wù)時(shí),我們一般是提供接口給前端使用,本文主要介紹了SpringBoot+Jersey跨域文件上傳的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下

一、需要的工具

tomcat服務(wù)器——作為文件服務(wù)器
Spring項(xiàng)目文件

二、創(chuàng)建過程

1.配置Tomcat服務(wù)器

1.1添加upload文件夾

在Tomcat目錄中你的webapps\Root文件夾下創(chuàng)建用于接收上傳文件的upload文件夾

1.2修改confi/web.xml設(shè)置允許上傳文件

<init-param>
        <param-name>readonly</param-name>
        <param-value>false</param-value>
 </init-param>

1.3修改Tomcat服務(wù)器的端口號(hào)

找到tomcat目錄/conf/server.xml，端口號(hào)改為8060

<Connector port="8060" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443" />

1.4啟動(dòng)Tomcat服務(wù)器

2.后臺(tái)開發(fā)

2.1新建Web項(xiàng)目，在pom.xml中添加依賴

<!-- 文件上傳:Begin -->
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.1</version>
        </dependency>
        <!-- 文件上傳:End -->
        <!--跨服務(wù)器上傳: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>
        <!--跨服務(wù)器上傳: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:
      #設(shè)置單個(gè)文件的大小，-1表示不限制，單位MB
      max-file-size: 10MB
      #設(shè)置單次請(qǐng)求的文件總大小，-1表示不限制，單位MB
      max-request-size: 100MB

3.創(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;

/**
 * 跨服務(wù)器文件上傳工具類
 *
 * @author 陳高風(fēng)
 *
 */
public class JesyFileUploadUtil {

    /**
     * 上傳文件
     *
     * @param file --文件名
     * @param serverUrl --服務(wù)器路徑http://127.0.0.1:8080/ssm_image_server
     * @return
     * @throws IOException
     */
    public static String uploadFile(MultipartFile file, String serverUrl) throws IOException {
        //重新設(shè)置文件名
        String newFileName = new Date().getTime()+""; //將當(dāng)前時(shí)間獲得的毫秒數(shù)拼接到新的文件名上
        //隨機(jī)生成一個(gè)3位的隨機(jī)數(shù)
        Random r = new Random();
        for(int i=0; i<3; i++) {
            newFileName += r.nextInt(10); //生成一個(gè)0-10之間的隨機(jī)整數(shù)
        }

        //獲取文件的擴(kuò)展名
        String orginalFilename = file.getOriginalFilename();
        String suffix = orginalFilename.substring(orginalFilename.indexOf("."));

        //創(chuàng)建jesy服務(wù)器，進(jìn)行跨服務(wù)器上傳
        Client client = Client.create();
        //把文件關(guān)聯(lián)到遠(yuǎn)程服務(wù)器
        //例如：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ù)庫(kù)（需要圖片的相對(duì)路徑）
//        String fullPath = serverUrl+"/upload/"+newFileName+suffix; //全路徑
        String relativePath = "/upload/"+newFileName+suffix; //相對(duì)路徑

        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.前端頁(yè)面上傳

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];
                    // 在這里進(jìn)行一系列的校驗(yàn)
                    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項(xiàng)目

上傳圖片

//上傳標(biāo)題圖
uploadLogo(){
    //等價(jià)代換替換this
    _self = this
    //第1步：打開手機(jī)相冊(cè)，或文件管理器選擇文件
    uni.chooseImage({
        count: 1, //允許上傳一個(gè)文件
        sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認(rèn)二者都有
        sourceType: ['album'], //從相冊(cè)選擇
        success: function (res) {
            //獲得選擇好的文件，他是一個(gè)數(shù)組，就算只有一個(gè)文件，那也是數(shù)組中只有一個(gè)元素
            const tempFilePaths = res.tempFilePaths;
            //第2步：把選擇的文件上傳到服務(wù)器
            const uploadTask = uni.uploadFile({
                url: 'http://localhost:8070/upload/file',
                filePath: tempFilePaths[0],
                name: 'fileName',
                success: (res) => {
                    console.log(res.data)
                    _self.btnLoading = true //讓按鈕的進(jìn)度條顯示出來
                    _self.btnState = true //讓按鈕不可點(diǎn)擊
                    _self.formData.logoPath = res.data
                    _self.btnLoading = false
                }
            })
            //獲取文件的上傳進(jìn)度
            uploadTask.onProgressUpdate(function(res){
                console.log('上傳進(jìn)度：'+res.progress)
                console.log('已經(jīng)上傳的數(shù)據(jù)長(zhǎng)度：'+res.totalBytesSent)
                console.log('預(yù)計(jì)需要上傳的數(shù)據(jù)總長(zhǎng)度：'+res.totalBytesExpectedToSend)
            })
        }
    })
},

上傳附件

uploadAttachment() {
    _self = this
    //第一步：打開文件選擇器
    uni.chooseFile({
        count: 1, //上傳文件的數(shù)量
        extension: ['.pdf', '.doc', '.xlsx'],
        success: function(res) {
            //獲取選擇好的文件，他是一個(gè)數(shù)組，就算只有一個(gè)文件，那也是數(shù)組中的一個(gè)元素
            const tempFilePaths = res.tempFilePaths
            //第二步，把選擇好的文件上傳到服務(wù)器
            uni.uploadFile({
                url: 'http://localhost:8070/upload/file', //上傳到Spring托管的服務(wù)器
                filePath: tempFilePaths[0], //添加選擇好的文件
                name: 'fileName',
                success: (res) => {
                    console.log(res.data)
                    _self.btnLoading1 = true //讓按鈕的進(jìn)度條顯示出來
                    _self.btnState1 = true //讓按鈕不可點(diǎn)擊
                    _self.formData.attachmentPath = res.data
                    _self.btnLoading1 = false
                }
            })
        }
    });
}

到此這篇關(guān)于SpringBoot+Jersey跨域文件上傳的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)SpringBoot Jersey跨域上傳內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: