脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → java → SpringBoot Jersey跨域上传

SpringBoot+Jersey跨域文件上传的实现示例

 更新时间：2024年07月04日 10:23:20   作者：二十多岁想退休  
在SpringBoot开发后端服务时,我们一般是提供接口给前端使用,本文主要介绍了SpringBoot+Jersey跨域文件上传的实现示例,具有一定的参考价值,感兴趣的可以了解一下

说明：本次所使用的

Spring内置的tomcat端口号为8070

tomcat文件服务器端口号为8060

uni-ui的端口号为8080

一、需要的工具

  • tomcat服务器——作为文件服务器
  • Spring项目文件

二、创建过程

1.配置Tomcat服务器

1.1添加upload文件夹

在Tomcat目录中你的webapps\Root文件夹下创建用于接收上传文件的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.后台开发

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: 100MB

3.创建工具类

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()+""; //将当前时间获得的毫秒数拼接到新的文件名上
        //随机生成一个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.jpg
        WebResource 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;
    }
}

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传统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) {
            //获得选择好的文件，他是一个数组，就算只有一个文件，那也是数组中只有一个元素
            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('已经上传的数据长度：'+res.totalBytesSent)
                console.log('预计需要上传的数据总长度：'+res.totalBytesExpectedToSend)
            })
        }
    })
},

上传附件

uploadAttachment() {
    _self = this
    //第一步：打开文件选择器
    uni.chooseFile({
        count: 1, //上传文件的数量
        extension: ['.pdf', '.doc', '.xlsx'],
        success: function(res) {
            //获取选择好的文件，他是一个数组，就算只有一个文件，那也是数组中的一个元素
            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跨域文件上传的实现示例的文章就介绍到这了,更多相关SpringBoot Jersey跨域上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！ 

您可能感兴趣的文章:

相关文章

  • Java中IO流的BufferedOutputStream和FileOutputStream对比

    Java中IO流的BufferedOutputStream和FileOutputStream对比

    这篇文章主要介绍了Java中IO流的BufferedOutputStream和FileOutputStream对比,不带缓冲的操作,每读一个字节就要写入一个字节，由于涉及磁盘的IO操作相比内存的操作要慢很多，所以在读写的字节比较少的情况下，效率比较低,需要的朋友可以参考下
    2023-07-07
  • Java实战之敏感词过滤器

    Java实战之敏感词过滤器

    这篇文章主要介绍了Java实战之敏感词过滤器,文中有非常详细的代码示例,对正在学习java的小伙伴们有非常好的帮助,需要的朋友可以参考下
    2021-04-04
  • springboot获取微信JSDK签名信息的实现示例

    springboot获取微信JSDK签名信息的实现示例

    本文介绍了如何在Spring Boot应用中获取微信JSDK的签名信息,包括获取接口URL、参数设置、签名算法和获取签名结果的步骤,具有一定的参考价值,感兴趣的可以了解一下
    2023-11-11
  • Spark-Sql入门程序示例详解

    Spark-Sql入门程序示例详解

    Spark SQL 作为 Spark 四大核心组件之一，主要用于处理结构化数据或半结构化数据，它支持在Spark 中使用 SQL 对数据进行查询，本文给大家介绍Spark-Sql入门程序，感兴趣的朋友跟随小编一起看看吧
    2021-12-12
  • 详解Java多线程编程中互斥锁ReentrantLock类的用法

    详解Java多线程编程中互斥锁ReentrantLock类的用法

    Java多线程并发的程序中使用互斥锁有synchronized和ReentrantLock两种方式,这里我们来详解Java多线程编程中互斥锁ReentrantLock类的用法:
    2016-07-07
  • Java打包之后读取Resources下的文件失效原因及解决方法

    Java打包之后读取Resources下的文件失效原因及解决方法

    这篇文章主要给大家介绍了Java打包之后读取Resources下的文件失效的问题分析和解决方法,文中通过代码示例和图文结合给大家讲解非常详细,需要的朋友可以参考下
    2023-12-12
  • 解决java.sql.SQLException: validateConnection false问题的方法汇总(最全)

    解决java.sql.SQLException: validateConnection false问题的方法汇总(最

    这篇文章主要给大家介绍了关于解决java.sql.SQLException: validateConnection false问题的方法汇总,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • Mybatis使用update更新值为null时不生效问题解决

    Mybatis使用update更新值为null时不生效问题解决

    这篇文章主要介绍了Mybatis使用update更新值为null时不生效问题解决,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-06-06
  • SpringBoot+Mybatis实现登录注册的示例代码

    SpringBoot+Mybatis实现登录注册的示例代码

    这篇文章主要介绍了SpringBoot+Mybatis实现登录注册的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • mybatis/mybatis-plus模糊查询语句特殊字符转义拦截器的实现

    mybatis/mybatis-plus模糊查询语句特殊字符转义拦截器的实现

    在开发中，我们通常会遇到这样的情况。用户在录入信息是录入了‘%’，而在查询时无法精确匹配‘%’。究其原因，‘%’是MySQL的关键字，如果我们想要精确匹配‘%’，那么需要对其进行转义，本文就详细的介绍一下
    2021-11-11

最新评论