前端使用 Element Plus架构vue3.0实现图片拖拉拽，后等比压缩，上传到Spring Boot后端
图片拖拉拽 等比压缩上传
为了在前端对图片文件进行等比压缩后再上传到后端，可以使用 canvas 元素来实现图片的压缩。以下是一个详细的实现步骤：
- 前端实现图片等比压缩：使用
canvas元素对图片进行压缩。 - 前端上传压缩后的图片：使用
el-upload组件上传压缩后的图片。 - 后端接收并保存图片：在 Spring Boot 中接收上传的图片并保存。
下面是一个详细的实现示例。
1. 前端实现图片等比压缩
首先，确保你已经安装了 jszip 和 file-saver 库来处理文件压缩。
bash
npm install jszip file-saver2. 创建拖拽上传组件
修改 DragUpload.vue 组件以支持图片等比压缩和上传。
vue
将文件拖到此处，或点击上传
只能上传jpg/png文件，且不超过500kb
上传到服务器
已上传文件列表:
-
{{ file.name }}
![Uploaded file]()
3. 后端 Spring Boot 接收并解压文件
创建一个 Spring Boot 项目来接收并解压上传的文件。
3.1 添加依赖
在 pom.xml 中添加必要的依赖：
xml
org.springframework.boot
spring-boot-starter-web
org.apache.commons
commons-compress
1.21
3.2 创建文件上传控制器
创建一个控制器来处理文件上传和解压。
java
package com.example.demo.controller;
import org.apache.commons.compress.archivers.zip.ZipArchiveEntry;
import org.apache.commons.compress.archivers.zip.ZipFile;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.util.Enumeration;
@RestController
public class FileUploadController {
@PostMapping("/upload")
public String uploadFile(@RequestParam("file") MultipartFile file) {
try {
// 创建临时文件存储上传的压缩文件
File tempFile = File.createTempFile("uploaded", ".zip");
file.transferTo(tempFile);
// 解压文件
ZipFile zipFile = new ZipFile(tempFile);
Enumeration entries = zipFile.getEntries();
while (entries.hasMoreElements()) {
ZipArchiveEntry entry = entries.nextElement();
if (!entry.isDirectory()) {
File entryFile = new File("uploads/" + entry.getName());
entryFile.getParentFile().mkdirs();
try (InputStream inputStream = zipFile.getInputStream(entry);
FileOutputStream outputStream = new FileOutputStream(entryFile)) {
byte[] buffer = new byte[1024];
int length;
while ((length = inputStream.read(buffer)) > 0) {
outputStream.write(buffer, 0, length);
}
}
}
}
// 删除临时文件
tempFile.delete();
return "文件上传并解压成功";
} catch (Exception e) {
e.printStackTrace();
return "文件上传或解压失败";
}
}
} 3.3 配置文件上传大小限制
在 application.properties 中配置文件上传大小限制：
properties
spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB3.4 创建上传目录
确保项目中有一个 uploads 目录来存储解压后的文件。你可以在项目根目录下创建这个目录，或者在代码中动态创建。
4. 运行项目
-
启动 Spring Boot 项目：
bash
mvn spring-boot:run2.启动 Vue 项目：
bash
npm run serve5. 测试上传功能
- 打开浏览器，访问 Vue 项目（通常是
http://localhost:8080）。 - 使用拖拽上传组件上传图片文件。
- 点击“上传到服务器”按钮，图片将被等比压缩并上传到 Spring Boot 后端。
- 后端接收文件并解压到
uploads目录中。
通过以上步骤，你可以在前端实现图片等比压缩并在后端 Spring Boot 架构中接收文件。
文件的拖拉拽上传
在前端实现文件压缩并在后端 Spring Boot 架构中接收文件，可以分为以下几个步骤：
- 前端实现文件压缩：使用 JavaScript 库（如
jszip）来压缩文件。 - 前端上传压缩后的文件：使用
el-upload组件上传压缩后的文件。 - 后端接收并解压文件：在 Spring Boot 中接收上传的压缩文件并解压。
下面是一个详细的实现示例。
1. 前端实现文件压缩
首先，安装 jszip 和 file-saver 库来处理文件压缩和保存。
bash
npm install jszip file-saver2. 创建拖拽上传组件
修改 DragUpload.vue 组件以支持文件压缩和上传。
vue
将文件拖到此处，或点击上传
只能上传jpg/png文件，且不超过500kb
上传到服务器
已上传文件列表:
-
{{ file.name }}
![Uploaded file]()
3. 后端 Spring Boot 接收并解压文件
创建一个 Spring Boot 项目来接收并解压上传的文件。
3.1 添加依赖
在 pom.xml 中添加必要的依赖：
xml
org.springframework.boot
spring-boot-starter-web
org.apache.commons
commons-compress
1.21
3.2 创建文件上传控制器
创建一个控制器来处理文件上传和解压。
java
package com.example.demo.controller;
import org.apache.commons.compress.archivers.zip.ZipArchiveEntry;
import org.apache.commons.compress.archivers.zip.ZipFile;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.util.Enumeration;
@RestController
public class FileUploadController {
@PostMapping("/upload")
public String uploadFile(@RequestParam("file") MultipartFile file) {
try {
// 创建临时文件存储上传的压缩文件
File tempFile = File.createTempFile("uploaded", ".zip");
file.transferTo(tempFile);
// 解压文件
ZipFile zipFile = new ZipFile(tempFile);
Enumeration entries = zipFile.getEntries();
while (entries.hasMoreElements()) {
ZipArchiveEntry entry = entries.nextElement();
if (!entry.isDirectory()) {
File entryFile = new File("uploads/" + entry.getName());
entryFile.getParentFile().mkdirs();
try (InputStream inputStream = zipFile.getInputStream(entry);
FileOutputStream outputStream = new FileOutputStream(entryFile)) {
byte[] buffer = new byte[1024];
int length;
while ((length = inputStream.read(buffer)) > 0) {
outputStream.write(buffer, 0, length);
}
}
}
}
// 删除临时文件
tempFile.delete();
return "文件上传并解压成功";
} catch (Exception e) {
e.printStackTrace();
return "文件上传或解压失败";
}
}
} 3.3 配置文件上传大小限制
在 application.properties 中配置文件上传大小限制：
properties
spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB3.4 创建上传目录
确保项目中有一个 uploads 目录来存储解压后的文件。你可以在项目根目录下创建这个目录，或者在代码中动态创建。
4. 运行项目
-
启动 Spring Boot 项目：
bash
mvn spring-boot:run2.启动 Vue 项目：
bash
npm run serve5. 测试上传功能
- 打开浏览器，访问 Vue 项目（通常是
http://localhost:8080）。 - 使用拖拽上传组件上传文件或图片。
- 点击“上传到服务器”按钮，文件将被压缩并上传到 Spring Boot 后端。
- 后端接收文件并解压到
uploads目录中。
通过以上步骤，你可以在前端实现文件压缩并在后端 Spring Boot 架构中接收文件。