文件上传

三太子哪吒_
207 阅读1分钟

配置相关

1.1修改conf\web.xml设置允许上传文件(Tomcat服务器)

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

image.png

1.2启动tomcat服务器

image.png

image.png

在后端项目resource文件夹下添加application.yml配置文件

image.png

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

添加依赖(后端)

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>

    <!-- 文件上传依赖 -->
    <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>
</dependencies>

工具类(后端)

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 {
    //
    public static String uploadFile(MultipartFile file, String serverUrl) throws IOException {
        String resultPath = "";//文件上传之后的路径


        // 第一步 给文件设置名称 保证唯一
        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之间的随机整数
        }

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

        fileName = fileName + suffix;   // 时间戳+三位随机数+后缀名

        // 第二步 创建jerSey相关对象 进行文件上传
        Client client = Client.create();
        // 效果 http://localhost:8080/upload/1230198900990.png
        WebResource webResource = client.resource(serverUrl+"/"+fileName);

        // 第三步 上传文件
        webResource.put(String.class,file.getBytes());
        return fileName;    // 第四步:获取文件路径
    }
}

创建后端controller类用于前端调用

image.png

package demo.contraller;

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,"http://localhost:8080/upload");
        } 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">
    <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(resp => {
                    console.log(resp.data);
                    this.imgUrl = resp.data;
                });
            }
        }
    })
</script>
</body>
</html>

image.png

avatar
文章
阅读
粉丝