如果有大量的文件,现在相同通过点击提交,就能够到自己指定的文件夹当中,如何做
有多文件上传的功能组件,可以重新写一个专门提交文件的组件和接口:
写一个提交图片和视频组件的上传接口,写成这样就行:多文件图片上传和多文件视频上传
本地写比较简单，编写好后台的接口，直接发送请求后台数据就能获取到
vue的submitView.vue的页面
<template> <div> <div style="margin: 250px 0"> <el-upload action="http://localhost:9090/submit/upload" :on-success="handleMultipleFileUpload" multiple > <el-button style="height: 50px;width:180px;" type="primary">多文件上传png图片</el-button> </el-upload> <el-upload action="http://localhost:9090/submitVideo/upload" :on-success="handleMultipleFileUpload" multiple > <el-button style="height: 50px;width:180px;" type="success">多文件上传视频</el-button> </el-upload> </div> </div> </template> <script> export default {}; </script> <style> </style>
必须调整的地方，设置上传文件的大小:
servlet: multipart: max-file-size: 100000MB max-request-size: 100000MB
上传文件的接口代码：
controller层写了两个类，一个放png，一个放video
submitVideoController的代码
package zero.file.videoProject.controller.submit; import cn.hutool.core.io.FileUtil; import org.springframework.beans.factory.annotation.Value; import org.springframework.web.bind.annotation.*; import org.springframework.web.multipart.MultipartFile; import zero.file.videoProject.bean.Result; import javax.servlet.ServletOutputStream; import javax.servlet.http.HttpServletResponse; import java.io.File; import java.io.IOException; import java.net.URLEncoder; @RestController @RequestMapping("/submitVideo") public class submitVideoController { @Value("${ip:localhost}") String ip; @Value("${server.port}") String port; private static final String ROOT_PATH = System.getProperty("user.dir") + File.separator + "static" + "/" + "video"; @PostMapping("/upload") public Result upload(MultipartFile file) throws IOException { String originalFilename = file.getOriginalFilename(); // 文件的原始名称 String mainName = FileUtil.mainName(originalFilename); String extName = FileUtil.extName(originalFilename); // 当前文件的目录 // 判断一下文件存储的路径存不存在,这种主要是文件上传重名问题 if (!FileUtil.exist(ROOT_PATH)){ FileUtil.mkdir(ROOT_PATH); // 如果不存在，创建这样一个目录 } // 如果当前文件的父级目录不存在 if (FileUtil.exist(ROOT_PATH + File.separator + originalFilename)){ originalFilename = System.currentTimeMillis() + "_" + mainName+ "." + extName; } File saveFile = new File(ROOT_PATH + File.separator + originalFilename); // D:\project\零一电科\技术资料\lingyidianke\zeroBackEnd\files\\121232312321323_aaa.png file.transferTo(saveFile); String url = "http://" + ip + ":" + port + "/file/download/" + originalFilename; return Result.success(url); } @GetMapping("/download/{fileName}") public void download(@PathVariable String fileName,HttpServletResponse response) throws IOException { // response.addHeader("Content-Disposition","attachment;filename=" + URLEncoder.encode(fileName,"UTF-8")); response.addHeader("Content-Disposition","inline;filename=" + URLEncoder.encode(fileName,"UTF-8")); String filePath = ROOT_PATH + File.separator + fileName; if (!FileUtil.exist(filePath)) { return; } byte[] bytes = FileUtil.readBytes(filePath); ServletOutputStream outputStream = response.getOutputStream(); outputStream.write(bytes); outputStream.flush(); outputStream.close(); } }
submitController
package zero.file.videoProject.controller.submit; import cn.hutool.core.io.FileUtil; import org.springframework.beans.factory.annotation.Value; import org.springframework.web.bind.annotation.*; import org.springframework.web.multipart.MultipartFile; import zero.file.videoProject.bean.Result; import javax.servlet.ServletOutputStream; import javax.servlet.http.HttpServletResponse; import java.io.File; import java.io.IOException; import java.net.URLEncoder; @RestController @RequestMapping("/submit") public class submitController { @Value("${ip:localhost}") String ip; @Value("${server.port}") String port; private static final String ROOT_PATH = System.getProperty("user.dir") + File.separator + "static" + "/" + "img"; @PostMapping("/upload") public Result upload(MultipartFile file) throws IOException { String originalFilename = file.getOriginalFilename(); // 文件的原始名称 String mainName = FileUtil.mainName(originalFilename); String extName = FileUtil.extName(originalFilename); // 当前文件的目录 // 判断一下文件存储的路径存不存在,这种主要是文件上传重名问题 if (!FileUtil.exist(ROOT_PATH)){ FileUtil.mkdir(ROOT_PATH); // 如果不存在，创建这样一个目录 } // 如果当前文件的父级目录不存在 if (FileUtil.exist(ROOT_PATH + File.separator + originalFilename)){ originalFilename = System.currentTimeMillis() + "_" + mainName+ "." + extName; } File saveFile = new File(ROOT_PATH + File.separator + originalFilename); // D:\project\零一电科\技术资料\lingyidianke\zeroBackEnd\files\\121232312321323_aaa.png file.transferTo(saveFile); String url = "http://" + ip + ":" + port + "/file/download/" + originalFilename; return Result.success(url); } @GetMapping("/download/{fileName}") public void download(@PathVariable String fileName,HttpServletResponse response) throws IOException { // response.addHeader("Content-Disposition","attachment;filename=" + URLEncoder.encode(fileName,"UTF-8")); response.addHeader("Content-Disposition","inline;filename=" + URLEncoder.encode(fileName,"UTF-8")); String filePath = ROOT_PATH + File.separator + fileName; if (!FileUtil.exist(filePath)) { return; } byte[] bytes = FileUtil.readBytes(filePath); ServletOutputStream outputStream = response.getOutputStream(); outputStream.write(bytes); outputStream.flush(); outputStream.close(); } }
简单的写法，只发送一个请求就能够上传文件了
如果想要改变传送文件的路径，具体的写法是重新写接口，向新的接口发送数据：
如果想要在文件底部创建文件就加上 + "files" + "/" + "img";
<template> <div> <div style="margin: 250px 0"> <el-upload action="http://localhost:9090/submit/upload" :on-success="handleMultipleFileUpload" multiple > <el-button style="height: 50px;width:180px;" type="primary">多文件上传png图片</el-button> </el-upload> <el-upload action="http://localhost:9090/submit/upload" :on-success="handleMultipleFileUpload" multiple > <el-button style="height: 50px;width:180px;" type="success">多文件上传视频</el-button> </el-upload> </div> </div> </template> <script> export default {}; </script> <style> </style>
一个简单的样式
