前端与后端文件上传下载实现-优快云博客

这篇博客介绍了如何在前端使用Vue.js和elementUI进行文件上传和下载操作。前端部分利用el-button和axios实现文件的FormData格式化并发送到后端。后端则展示了接收并处理文件上传下载的代码，但未对上传文件做进一步的数据处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、前端

页面展示：
前端代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.3/vue-router.js"></script>
		<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
		<script src="../js/base.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app" style="width: 50%;text-align: center;">
			<el-upload style="padding-top: 10%;" class="upload-demo" ref="upload" action="#" :file-list="fileList" :on-change="handleChange"
			 :auto-upload="false" :headers="headers" multiple>
				<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
				<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
				<el-button style="margin-left: 10px;" size="small" type="info" @click="download">下载到本地</el-button>
				<div slot="tip" class="el-upload__tip">【格式任意】</div>
			</el-upload>
		</div>
	</body>
	<script type="text/javascript">
		var Main = {
			data() {
				return {
					fileList: [],
					headers: {
						'Content-Type': 'multipart/form-data'
					}
				};
			},
			methods: {
				download() {
					location.href = "http://localhost:8080/transfer/download";
				},

				submitUpload() { //上传按钮
					var param = new FormData();
					this.fileList.forEach(
						(value, index) => {
							param.append("file", value.raw);
						});

					axios.post("/transfer/upload", param).then(responce => {
						this.$message({
							message: responce.data,
							duration: 1000
						});
					});
				},

				handleChange(files, fileLists) {
					this.fileList = fileLists;

				}
			}
		}
		var Ctor = Vue.extend(Main)
		new Ctor().$mount('#app')
	</script>
</html>

【上传】本例使用了elementUI的el-button标签，将前端文件转换成FormData的格式，通过axios的post请求，发送到后端
【下载】location.href = "http://localhost:8080/transfer/download";通过location.href的方式，向后端发送请求

二、后端

代码：

package com.han.sale.handler;

import com.han.common.entity.ResponseBean;
import com.han.common.entity.StatusCode;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.net.URLEncoder;
import java.util.Objects;

@Controller
@RequestMapping("transfer")
public class TransferHandler {

    private static String FILE_NAME = null;
    private static String UPLOAD_DIR = null;

    @PostMapping("upload")
    public ResponseEntity upload(@RequestParam MultipartFile file, HttpServletRequest request, HttpServletResponse response) throws Exception {
        // 获取文件名：鼬.jpg
        String fileName = file.getOriginalFilename();
        // 获取指定文件夹名称的路径：E:\maven\shopping\target\shopping\\uploadDir
        String realPath = request.getServletContext().getRealPath("uploadDir/");
        // 根据上述路径创建File对象
        File filePath = new File(realPath);
        // 若临时目录uploadDir不存在，则新建
        if (!filePath.exists()) {
            filePath.mkdir();
        }
        // 获取文件的绝对路径：E:\maven\shopping\target\shopping\\uploadDir\鼬.jpg
        String absPath = realPath + fileName;
        TransferHandler.FILE_NAME = absPath;
        TransferHandler.UPLOAD_DIR = realPath;
        // 通过上传的文件创建缓冲输出流对象outputStream
        BufferedOutputStream outputStream = new BufferedOutputStream(new FileOutputStream(absPath));
        // 通过outputStream读取文件内容
        outputStream.write(file.getBytes());
        // 刷新此输出流并强制任何缓冲的输出字节被写出。
        outputStream.flush();
        // 关闭此输出流并释放与此流相关联的任何系统资源。
        outputStream.close();
        return ResponseEntity.ok(new ResponseBean(StatusCode.OPERATE_SUCCESS, "上传成功！"));
    }

    @GetMapping("download")
    public HttpServletResponse download(HttpServletResponse response) throws Exception {
        // 根据文件的绝对路径创建文件对象
        // E:\maven\shopping\target\shopping\\uploadDir\鼬.jpg
        File file = new File(TransferHandler.FILE_NAME);
        // 获取文件名
        String name = file.getName();
        // 通过file创建缓冲输入流对象inputStream
        BufferedInputStream inputStream = new BufferedInputStream(new FileInputStream(file));
        // inputStream.available()为获取当前缓冲输出流对象的大小
        byte[] bytes = new byte[inputStream.available()];
        // inputStream读取字节对象bytes中的内容
        inputStream.read(bytes);
        // 关闭
        inputStream.close();
        // 重置
        response.reset();
        // 设置响应头，文件编码为"UTF-8"
        response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(new String(name.getBytes()), "UTF-8"));
        response.addHeader("Content-Length", "" + file.length());
        response.setContentType("application/octet-stream");
        // 创建缓冲输出流对象outputStream
        BufferedOutputStream outputStream = new BufferedOutputStream(response.getOutputStream());
        // 通过outputStream读取字节数组中的bytes内容
        outputStream.write(bytes);
        // 刷新
        outputStream.flush();
        // 关闭
        outputStream.close();
        // E:\maven\shopping\target\shopping\\uploadDir
        File fileDir = new File(TransferHandler.UPLOAD_DIR);
        // 遍历当前目录，删除此目录下的所有文件
        File[] files = fileDir.listFiles();
        Objects.requireNonNull(files);
        for (File f : files) {
            f.delete();
        }
        return response;
    }

}