做网站模板和服务器是一样的吗,网页制作基础教程第2版电子教材,网站开发模块的需求,陕西网站制作商Vue的APP实现下载文件功能#xff0c;并将文件保存到手机中 文字说明后台核心代码前台核心代码运行截图项目链接 文字说明 本文介绍Vue实现的APP#xff0c;将文件下载并保存到手机中#xff0c;为系统提供导出功能#xff1b;同时支持导入#xff0c;即选择本地的文件后并将文件保存到手机中 文字说明后台核心代码前台核心代码运行截图项目链接 文字说明 本文介绍Vue实现的APP将文件下载并保存到手机中为系统提供导出功能同时支持导入即选择本地的文件后获取文件内容并将其上传到服务器中也可选择对上传的文件内容进行解析为系统提供导入功能 附带讲解视频主要实验Vue的5App的文件上传和下载功能 后台核心代码 后端控制器代码上传接口 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());}}
}前台核心代码 页面主要代码 templatediv styledisplay: flex; justify-content: center; align-items: center; height: 100px; width: 100%el-button typeprimary clickselectFile()选择文件上传/el-buttonel-button typedanger clickopenDownloadDialog()下载文件/el-buttoninput typefile styledisplay: none changeuploadFile($event) refuploadFileRef/divel-dialog title文件下载 width60% v-modeldata.dialogel-input v-modeldata.fileName placeholder请输入下载文件名/template #footerspan classdialog-footerel-button clickdata.dialog false取消/el-buttonel-button typeprimary clickdownloadFile确认下载/el-button/span/template/el-dialog
/templatescript 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);
}
/scriptstyle
* {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上传下载文件
