今天我们主要来实现一下 java WEB中的一个文件的上传和下载
这个在系统开发中可以说相当常见 本文先单讲上传功能实现
以图片为例
这里 我们先搭建前端的一个环境
这里 我们直接创建一个文件夹 叫 fileTesting
用来存放我的项目环境
然后 在目录下打开终端 输入指令
vue create vuedom
创建一个叫vuedom的vue项目
考虑到有些朋友不太熟悉vue3语法 这里我们还是选择vue2的开发模式
然后 我们用编辑器打开刚刚创建的项目
src下的 App.vue 编写代码如下
<template>
<div id="app">
<h1>图片上传与下载</h1>
<input type="file" @change="upload" />
<img :src="url" />
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
url: "",
}
},
methods: {
upload(event) {
const file = event.target.files[0];
this.url = URL.createObjectURL(file);
}
}
}
</script>
<style>
</style>
我们 写了一个input设置类型为file 文件类型
这个表单元素用于上传文件
然后 绑定了change事件 意思就是 每次输入框value 改变是 就会触发upload
upload 因为是绑定的 文件类型的 input 那么 每次value改变 就是一个文件对象
我们直接拿一个参数去接
然后event参数 就是文件对象 其中的 target下的files 就是文件上传列表 我们去 0下标 就是第一个
然后 去除当中的 URL路径属性 复制给我们定义的响应式变量url
我们运行界面 发现确实是输入框
然后 我们点击上的 选择文件 按钮 然后 在弹出框中顺便选择一个本机的图片 点击打开
我们界面上 就出现了这个图片了
然后 我们来打开 IDEA 处理一下我们的后端代码
先创建一个项目
然后 弹出操作框中 java版本 选择 8 项目目录选一下 JDK 1.8
全部配置好 点击 Next
Spring Boot 版本选 2.7左右 然后 插件加一个 Web下的 Spring Web
这样 我们的项目就建好了
然后 我们找到 application.properties 配置文件 将其改名为application.yml
然后 我们再创建一个文件夹 叫 upload
然后 我们编写 application.yml 配置文件代码如下
server:
port: 80
upload:
path: D:/upload
我们先指定 项目运行在设备的 默认 80端口上
然后文件上传的路径设为 D盘下的upload
然后 在 src下 找到java启动类 在启动类同目录创建一个包 叫 controller
下面创建一个类 叫 FileUploadController 参考代码如下
package com.example.javadom.controller;
import org.springframework.beans.factory.annotation.Value;
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.IOException;
@RestController
public class FileUploadController {
@Value("${upload.path}") // 从配置文件中获取上传文件的路径
private String uploadPath;
@PostMapping("/upload")
public String uploadFile(@RequestParam("file") MultipartFile file) throws IOException {
// 获取文件名
String fileName = file.getOriginalFilename();
// 构建文件路径
String filePath = uploadPath + File.separator + fileName;
// 保存文件
file.transferTo(new File(filePath));
return filePath;
}
}
这里 我们接收一个 file 参数 就是一个文件流 然后 读取文件名和路径 最后 存储文件
最后 将文件的新路径返回前端
然后 我们运行项目 可以看到 运行到了 80端口
然后 我们打开之前的vue项目 终端输入
npm i axios@0.21.0
引入请求工具 axios
然后 找到根目录下的 vue.config.js
加入如下代码
devServer: {
proxy: {
"/upload": {
target: 'http://localhost/',
ws: true,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
},
}
}
这里 我们写了这个 代理配置 当匹配到upload 直接指向 http://localhost/
然后 我们将 vue项目 src下的 App.vue 代码更改如下
<template>
<div id="app">
<h1>图片上传与下载</h1>
<input type="file" @change="upload" />
<img :src="url" />
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'App',
data() {
return {
url: "",
}
},
methods: {
upload(event) {
const file = event.target.files[0];
this.url = URL.createObjectURL(file);
// 创建FormData对象
const formData = new FormData();
formData.append('file', file);
// 发送POST请求
axios.post('/upload', formData)
.then(response => {
console.log(response.data);
// 处理上传成功的逻辑
})
.catch(error => {
console.error(error);
// 处理上传失败的逻辑
});
}
}
}
</script>
<style>
</style>
首先 我们要引入 axios 插件 然后 我们upload触发时 调用axios 发送请求
去讲文件上传过去
话不多说 我们手动测试一下
这里 我们点击 选择文件
选择一个图片 然后点击 打开
这里 我们的请求结果就返回来了
我们打开文件夹 看一下
我们的文件就出现在这里了
