阆中市住房和城乡建设局网站,百度网站建设技术,网站板块模板,移动端网站制作模板【写在前面】其实这篇文章我早就想写了#xff0c;只是一直被需求开发耽搁#xff0c;这不晚上刚好下班后有点时间#xff0c;记录一下。需求是excel表格的上传#xff0c;这个是很多业务系统不可或缺的功能点#xff0c;再此也希望您能够读完我这篇文章对文件上传不再困惑…【写在前面】其实这篇文章我早就想写了只是一直被需求开发耽搁这不晚上刚好下班后有点时间记录一下。需求是excel表格的上传这个是很多业务系统不可或缺的功能点再此也希望您能够读完我这篇文章对文件上传不再困惑。文件下载见另外一篇 涉及知识点java实现文件上传vue实现文件上传swagger测试。
目录一、思路整理二、实现效果三、实现过程前后端源码1、上传路径设置2、java接口实现源码核心3、前端实现源码基于vue3.1 创建input标签3.2 方法函数3.3 axios请求配置核心4、功能测试swagger和debugger四、彩蛋上皇榜一、思路整理
首先我们在写一个项目或一个功能的时候脑海里就应该去勾勒一下实现过程我大致归纳为以下几点 1、上传环境的准备也就是文件上传到哪本地或服务器或虚机 2、上传代码的开发前后端页面的准备依赖组件下载 3、自主测试看效果
二、实现效果
文件的上传效果
三、实现过程前后端源码
1、上传路径设置
鉴于很多人没有服务器或虚机我就用本地作为示例首先我们先创建一个maven项目工程众所周知java运行后都是编译成class文件所以我们将上传的路径设置在classes下的template里。 获取存放文件路径的方式
String filePath this.getClass().getResource(/template/).getPath();2、java接口实现源码核心
具体java实现代码如下其中所需要的插件需要自己引入
Overridepublic void uploadTemplate(MultipartFile file) throws Exception {boolean bupload(file);}public boolean upload(MultipartFile file) throws Exception {boolean b false;String filePath this.getClass().getResource(/template/).getPath();String fileName file.getOriginalFilename();try {UploadState state null;File oldFile new File(filePathfileName);if (oldFile.exists()) {oldFile.delete();}state UploadFileUtils.upload4Stream(fileName, filePath, file.getInputStream());if (state.getFlag() UploadState.UPLOAD_SUCCSSS.getFlag()) {b true;} else {b false;}} catch (IOException e) {logger.error(e.getMessage(), e);throw e;} catch (Exception e) {logger.error(e.getMessage(), e);throw e;}return b;
}此处需要前端注意的是需要传binary形式的入参也就是接口调用时前端的请求参数为
不然后端也不能处理。
3、前端实现源码基于vue
3.1 创建input标签
首先我们创建一个input 标签type为file用于选择上传文件的临时节点如下所示
inputtypefileclassupload_filechangeupload_files($event)accept.pdf, .doc, .docx, .xls, .xlsx
/设置input的change事件触发上传函数另外设置其所接受的上传文件的类型我暂时针对pdf,word.excel文档类型做了设置。
3.2 方法函数
在vue的methods里面设置upload_files方法
methods: {upload_files: function (e) {const file e.target.files[0];console.log(file);uploadFiles(file);},},针对uploadFiles方法体我是专门放在js文件里的然后再调用axios里的公用方法。
export const uploadFiles (params) { return requpload(post, portHead /Updown/uploadTemplate, params) };3.3 axios请求配置核心
我是直接用post请求的方式如下所示
const requpload (method, url, file) {let params new FormData();params.append(file, file);axios.post(url, params).then((response) {console.log(上传文件了响应)console.log(response)Toast.success(上传成功);// this.$message.success(成功)}).catch(function (err) {console.log(上传文件了失败)console.log(err) //捕获异常Toast.fail(上传失败);// this.$message.error(失败)})
};4、功能测试swagger和debugger
当前后端都搭建好了然后启动前后端程序在前端页面上点击上传按钮然后看请求是否200且文件是否上传到classes的template下。如果失败了切记先看后端接口是否通的用postman或是swagger(最好用swagger3测试因为2版本有中文乱码问题)如果后端通的就需要通过debugger模式来定位前端的传参的问题切记是binary形式。
最终效果如下所示 四、彩蛋上皇榜
如有不太清楚的可以留言哈一起探讨一起进步期待您的反馈。
如果觉得这篇文章对您有帮助的话想支持博主的可以上皇榜看看哟皇榜点击此处进入
