jersey跨域文件上传

最新推荐文章于 2024-06-26 09:55:19 发布

朵朵宝

最新推荐文章于 2024-06-26 09:55:19 发布

阅读量537

点赞数

分类专栏： jersey跨域文件文章标签：前端服务器 tomcat 后端

本文链接：https://blog.csdn.net/magic_818/article/details/128033243

版权

jersey跨域文件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.1、添加upload文件夹

在webapps\Root文件夹下创建用于接收上传文件的upload文件夹

创建upload文件夹

1.2、修改conf\web.xml设置允许上传文件

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

1.3、启动tomcat服务器

Tomcat文件路径bin目录startup.bat

启动界面如下所示

之后登录http://localhost:8080/ 网址,显示Tomcat即为成功

之后往upload中放入图片,输入路径

效果如下图所示

二、后台开发

新建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配置上传文件的大小

#设置单个文件的大小，-1表示不限制，单位MB
max-file-size: 10MB
#设置单次请求的文件总大小，-1表示不限制，单位MB
max-request-size: 100MB

因为我们启动8080已经占用了,所以这里我们要用8070

还有码写application.yml文件时注意空格,否则会出现配置错误

server:
  port: 8070
spring:
  servlet:
    multipart:
      #设置单个文件的大小，-1表示不限制，单位MB
      max-file-size: 10MB
      #设置单次请求的文件总大小，-1表示不限制，单位MB
      max-request-size: 100MB

Jersey工具类

逻辑整理

给文件设置个名称,保证唯一 
获取当前时间的时间戳(毫秒数)
随机生成3位数,拼接到时间戳后面
获取原文件的后缀名
获取原版文件的文件名,比如aaa.png

创建Jersey对象,进行文件上传
想得到的效果:http://localhost:8080/upload/245525665555265.png
serverUrl=http://localhost:8080/upload  /    fileName=245525665555265.png

```
通过Jersey上传文件
```
```
获取文件的路径
```

package demo.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 +(int)(Math.random()*10);
            fileName= fileName + r.nextInt(10);//生成一个0-10之间的随机整数
        }

        //获取原文件的后缀名
        //获取原版文件的文件名,比如aaa.png
        String sourceFileName = file.getOriginalFilename();
        //获取文件的后缀名.png
        String suffix = sourceFileName.substring(sourceFileName.lastIndexOf("."));//indexOf从左往右  lastIndexOf从右往左

        fileName = fileName + suffix; //生成时间戳+3位随机数+后缀名,比如:245525665555265.png

        //第2步:创建Jersey对象,进行文件上传
        Client client = Client.create();
        //想得到的效果:http://localhost:8080/upload/245525665555265.png
        //serverUrl=http://localhost:8080/upload  /    fileName=245525665555265.png
        WebResource webResource = client.resource(serverUrl+"/"+fileName);
        //第3步:通过Jersey上传文件
        webResource.put(String.class,file.getBytes());

        //第4步:获取文件的路径

        return fileName;
    }
}

Controller

然后执行文件,如果出现下面执行错误,jdk版本不对

第一步 prom中版本更改,3.0.0改成2.6.3

第二步

第三步

验证服务器启动成功,执行Demo类

三、前端开发

<!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: {
            //上传文件
            //上传文件要取到,所以用e来获取
            upload(e){
                var file = e.target.files[0];//获取要上传的文件

                var formData=new FormData();
                formData.append("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>

效果如图