【2阶】jersey跨域文件上传

小王码字

已于 2022-12-05 20:25:51 修改

阅读量163

点赞数

文章标签： java 前端开发语言

于 2022-11-25 17:39:12 首次发布

本文链接：https://blog.csdn.net/Wangzz1217/article/details/128039209

版权

一.配置tomcat

1.1添加upload文件夹

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

1.3启动tomcat服务器

二.后台开发

2.1新建web项目,在pom.xml中添加依赖

2.2 application.yml中配置上传文件的大小

2.3 Jersey工具类

2.4 Controller

三.前端开发

一.配置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服务器

二.后台开发

2.1新建web项目,在pom.xml中添加依赖

        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.3.1</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.47</version>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>

2.2 application.yml中配置上传文件的大小

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

2.3 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/1.jpg
     * @return
     */

    public static String uploadFile(MultipartFile file ,String serverUrl) throws IOException {
        
        //第一步,给文件设置个名称,保证唯一
        String fileName = "";//文件名起始
        //获取当前时间的时间戳(毫秒数)
        long timeStamp = new Date().getTime();
        fileName = fileName + timeStamp;

        //随机生成3位数,拼接到时间戳后面
        Random r = new Random();
        for (int i =0;i<3;i++){
            //生成一个0-10之间的随机整数
            //fileName = fileName + (int)(Math.random()*10);
            fileName = fileName + r.nextInt(10);//生成一个0-10之间的随机整数
        }


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

        fileName = fileName + suffix;//时间戳+3伪随机数+后缀名


        //第二步,创建jersey对象,进行文件上传
        Client client = Client.create();
        //想得到的效果:http://localhost:8080/upload/123131312321.jpg
        WebResource webResource = client.resource(serverUrl+"/"+fileName);


        //第三步,上传文件
        webResource.put(String.class,file.getBytes());

        return fileName; //第四步,获取文件的路径
    }
}

2.4 Controller

package demo.controller;

import demo.utils.JerseyFileUploadUtil;
import org.springframework.web.bind.annotation.CrossOrigin;
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
public class FileController {

    @RequestMapping("/uploadFile")
    @CrossOrigin(origins = "*")
    public String upload(MultipartFile file){
        String fileName = null;
        String serverUrl = "http://localhost:8080/upload";
        try {
          fileName =  JerseyFileUploadUtil.uploadFile(file,serverUrl);
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
        return serverUrl+"/"+fileName;
    }
}

三.前端开发

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

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