使用Jersey实现文件上传的案例

最新推荐文章于 2023-12-10 16:55:48 发布

Lockie89

最新推荐文章于 2023-12-10 16:55:48 发布

阅读量297

点赞数

文章标签： servlet java 前端

本文链接：https://blog.csdn.net/Lockie89/article/details/128039028

版权

* 在进行这个项目过程中, 因为在application.yml文件中修改了端口号为8070, 所以在从浏览器进行后台项目的访问时使用的是8070, 但本地文件是上传到tomcat - webapps - Root - upload文件中的, 所以在进行回显的时候(从后端传回前端的), 使用的应该是 8080. 如下图

一、配置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.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 JesyFileUploadUtil {

    /**
     * 上传文件
     *
     * @param file 要上传的文件
     * @param serverUrl  文件服务器的地址,比如:http://localhost:8070/upload
     * @return
     */
    public static String uploadFile(MultipartFile file,String serverUrl) throws IOException {

        //第一步: 给文件设置个名称, 保证唯一  文件名称:毫秒数+3位随机数
        String fileName = null;
        //获取当前时间的时间戳(毫秒数)
        long timeStamp = new Date().getTime();
        fileName = fileName + timeStamp;
        //随机生成3位数,拼接在时间戳后面
        Random random = new Random();
        for (int i = 0; i < 3; i++){
            //通过random对象生成0-10之间的随机整数
           fileName = fileName + random.nextInt(10);
        }

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

        fileName = fileName + suffix; //13221.png  时间戳 + 3位随机数 +后缀名
        //第二步:  创建Jesy文件的对象, 进行文件上传
        Client client = Client.create();
        //想要的效果:http://localhost:8070/upload/13221.png
        WebResource webResource = client.resource(serverUrl+"/"+fileName);

        //第三步:  上传文件                获取字节流
        webResource.put(String.class,file.getBytes());

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

        return fileName;
    }
}

Controller

package demo.controller;

import demo.utils.JesyFileUploadUtil;
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 =  JesyFileUploadUtil.uploadFile(file,serverUrl);
        } catch (IOException e) {
            e.printStackTrace();
        }
        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" />
        <!--图片回显, 使用v-bind实现属性的绑定-->
        <img :src="imgUrl"/>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                imgUrl:null
            },
            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);
                        this.imgUrl = res.data;
                    },err=>{
                        console.log(err)
                    })
                }
            }
        });
    </script>
</body>
</html>