Vue的APP实现下载文件功能，并将文件保存到手机中

文字说明

本文介绍Vue实现的APP，将文件下载并保存到手机中，为系统提供导出功能；同时支持导入，即选择本地的文件后，获取文件内容，并将其上传到服务器中，也可选择对上传的文件内容进行解析，为系统提供导入功能

附带讲解视频，主要实验Vue的5+App的文件上传和下载功能

后台核心代码

后端控制器代码（上传接口）

package com.boot.controller;import com.boot.entity.Result;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;import java.io.InputStream;/*** @author bbyh* @date 2024/6/4 22:58*/
@RestController
@Slf4j
@CrossOrigin(origins = "*", maxAge = 3600)
public class UploadController {@PostMapping("/upload")public Result upload(@RequestBody MultipartFile file) {try {InputStream inputStream = file.getInputStream();byte[] buf = new byte[inputStream.available()];int read = inputStream.read(buf);String fileContent = new String(buf, 0, read);log.info("文件名称：{}，文件内容：{}", file.getOriginalFilename(), fileContent);return Result.success("文件上传成功", fileContent);} catch (Exception e) {log.error(e.getMessage(), e);return Result.error("文件上传接口接口服务出错", null);}}
}

下载接口

package com.boot.controller;import com.boot.entity.Result;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpServletResponse;
import java.io.InputStream;
import java.net.URLEncoder;
import java.nio.file.Files;
import java.nio.file.Paths;/*** @author bbyh* @date 2024/6/4 22:45*/
@RestController
@Slf4j
@CrossOrigin(origins = "*", maxAge = 3600)
public class DownloadController {@Value("${file.path}")private String filePath;@GetMapping("/download/{fileName}")public void download(@PathVariable String fileName, HttpServletResponse response) {try {response.setContentType("application/octet-stream");response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "UTF-8"));try (InputStream inputStream = Files.newInputStream(Paths.get(filePath + fileName))) {byte[] buf = new byte[inputStream.available()];int read = inputStream.read(buf);response.getOutputStream().write(buf, 0, read);}} catch (Exception e) {log.error(e.getMessage(), e);response.reset();Result.writeResult(response, "文件下载接口接口服务出错，" + e.getMessage());}}
}

前台核心代码

页面主要代码

<template><div style="display: flex; justify-content: center; align-items: center; height: 100px; width: 100%"><el-button type="primary" @click="selectFile()">选择文件上传</el-button><el-button type="danger" @click="openDownloadDialog()">下载文件</el-button><input type="file" style="display: none" @change="uploadFile($event)" ref="uploadFileRef"></div><el-dialog title="文件下载" width="60%" v-model="data.dialog"><el-input v-model="data.fileName" placeholder="请输入下载文件名"/><template #footer><span class="dialog-footer"><el-button @click="data.dialog = false">取消</el-button><el-button type="primary" @click="downloadFile">确认下载</el-button></span></template></el-dialog>
</template><script setup>
import {downloadFileToLocal, message, postRequest} from "./util";
import {reactive, ref} from "vue";function uploadFile(event) {if (event.target.files.length === 0) {message("warning", "本次未选择文件");return;}const formData = new FormData();const file = event.target.files[0];formData.append("file", file, file.name);postRequest("/upload", formData).then((res) => {if (res.data.code === 200) {message("success", res.data.data);} else if (res.data.code === 500) {message("error", res.data.msg);}});
}const uploadFileRef = ref();async function selectFile() {uploadFileRef.value.click();
}const data = reactive({fileName: undefined,dialog: false,
});function openDownloadDialog() {data.fileName = undefined;data.dialog = true;
}function downloadFile() {downloadFileToLocal("/download/" + data.fileName, data.fileName);
}
</script><style>
* {padding: 0;margin: 0;box-sizing: border-box;
}
</style>

工具类代码

import axios from "axios";
import {ElMessage} from "element-plus";const baseUrl = "http://127.0.0.1:5000";export const downloadFileToLocal = (href, filename) => {const eleLink = document.createElement('a');eleLink.download = filename;eleLink.style.display = 'none';eleLink.href = baseUrl + href;document.body.appendChild(eleLink);eleLink.click();document.body.removeChild(eleLink);
}export function message(type, msg) {ElMessage({message: msg,type: type,center: true,showClose: true,})
}export const postRequest = (url, data) => {return axios({method: 'post',url: baseUrl + url,data: data,})
}

运行截图

页面运行效果

项目链接

VueApp上传下载文件