Comment SpringBoot implémente plusieurs téléchargements de fichiers-javaDidacticiel-php.cn

Comment SpringBoot implémente plusieurs téléchargements de fichiers

王林

Libérer： 2023-05-11 16:40:06

avant

3586 Les gens l'ont consulté

1. Structure du code :

Comment SpringBoot implémente plusieurs téléchargements de fichiers

2.Couche de contrôleur

package com.yqifei.upload.controller;

import io.swagger.annotations.Api;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import java.util.UUID;

/**
 * @ClassName UploadController
 * @Description TODO
 * @Author jiangyuntao
 * @Data 2023/3/7 23:52
 * @Version 1.0
 * @Email yuntaojiang@foxmail.com
 */

@RestController
@CrossOrigin
@RequestMapping("/posts")
@Api(tags = "文件上传控制器")
public class UploadController {

/*
http://localhost:8088/swagger-ui.html#
*/
    @PostMapping(value="/upload")
    @CrossOrigin
    public List<String> fileload(@RequestParam(value = "file") MultipartFile[] file, HttpServletRequest request) throws IOException {
        System.out.println(file.length);
        String savaLaction="d:/data/";
        String fileSaveName;
        List<String> imageUri = new ArrayList<>();
        for (MultipartFile multipartFile:file) {
            System.out.println("文件"+multipartFile.getOriginalFilename());
            fileSaveName = UUID.randomUUID().toString()+multipartFile.getOriginalFilename();
            multipartFile.transferTo(new File(savaLaction,fileSaveName));
            String res = request.getScheme()+"://"+request.getServerName()+":"+"8080"+savaLaction+"/"+fileSaveName;
            imageUri.add(res);
        }
        System.out.println(imageUri);
        return imageUri;
    }

}

Copier après la connexion

3. Configuration de l'intercepteur inter-domaines

package com.yqifei.upload.utils;

import org.springframework.context.annotation.Configuration;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebFilter(filterName = "CorsFilter")
@Configuration
public class CorsFilter implements Filter {
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin","*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, PATCH, DELETE, PUT");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        chain.doFilter(req, res);
    }
}

Copier après la connexion

4.Configuration de l'application.properties

# 应用名称
spring.application.name=upload
# 应用服务 WEB 访问端口
server.port=8088

spring.web.resources.static-locations=file:d:/data/

spring.servlet.multipart.max-request-size=50MB
spring.servlet.multipart.max-file-size=50MB

Copier après la connexion

5.

Comment SpringBoot implémente plusieurs téléchargements de fichiers 7. Obtenez l'url de l'image et lisez l'image

Comment SpringBoot implémente plusieurs téléchargements de fichiers Modifiez le fichier server.xml de Tomcat

Comment SpringBoot implémente plusieurs téléchargements de fichiers Ajoutez la phrase suivante

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Multiple File Upload</title>
  </head>
  <body>
    <h2>Multiple File Upload</h2>
    <form>
      <input type="file" id="fileInput" multiple />
      <button type="button" onclick="uploadFiles()">Upload</button>
    </form>
    <div id="progress"></div>
    <div>图片返回值地址：</div>
    <div id="result"></div>
  </body>
  <script>
    function uploadFiles() {
      const files = document.getElementById("fileInput").files;
      const xhr = new XMLHttpRequest();
      const formData = new FormData();

      for (let i = 0; i < files.length; i++) {
        formData.append("file", files[i]);
      }

      xhr.open("POST", "http://localhost:8088/posts/upload");
      xhr.upload.addEventListener("progress", function (event) {
        if (event.lengthComputable) {
          const percent = Math.round((event.loaded / event.total) * 100);
          const progress = document.getElementById("progress");
          progress.innerHTML = "Upload progress: " + percent + "%";
        }
      });
      xhr.addEventListener("load", function (event) {
        const response = JSON.parse(event.target.responseText);
        console.log(response);
        // 在HTML页面上找到需要显示响应结果的元素
        const resultElement = document.getElementById("result");
        // 更新元素的文本内容为服务器返回的值
        resultElement.textContent = response;
      });
      xhr.send(formData);
    }
  </script>
</html>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!