jersey跨域文件上传

最新推荐文章于 2023-06-09 11:23:14 发布

周途

最新推荐文章于 2023-06-09 11:23:14 发布

阅读量69

点赞数

分类专栏：技术点切片文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/zhoutao_88/article/details/128039113

版权

技术点切片专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

二、后台开发

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

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

Jersey工具类

package demo.util;

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 qin
 *
 */
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;
    }
}

Controller

	@RequestMapping("/uploadFile")
    @CrossOrigin(origins = "*")
    public String upload(MultipartFile fileName){
        String url = "http://localhost:8080/upload";
        String path = "";
        try {
            path = JesyFileUploadUtil.uploadFile(fileName, url);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return path;
    }

三、前端开发

<!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>