【Java实现文件上传】java后端+vue前端实现文件上传全过程详解（附源码）-Toy模板网

这篇具有很好参考价值的文章主要介绍了【Java实现文件上传】java后端+vue前端实现文件上传全过程详解（附源码）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

【写在前面】其实这篇文章我早就想写了，只是一直被需求开发耽搁，这不晚上刚好下班后有点时间，记录一下。需求是excel表格的上传，这个是很多业务系统不可或缺的功能点，再此也希望您能够读完我这篇文章对文件上传不再困惑。（文件下载见另外一篇）
涉及知识点：java实现文件上传，vue实现文件上传，swagger测试。

一、思路整理

首先我们在写一个项目或一个功能的时候，脑海里就应该去勾勒一下实现过程，我大致归纳为以下几点：
1、上传环境的准备，也就是文件上传到哪（本地或服务器或虚机）
2、上传代码的开发，前后端页面的准备（依赖组件下载）
3、自主测试，看效果

二、实现效果

文件的上传效果
【Java实现文件上传】java后端+vue前端实现文件上传全过程详解（附源码）

三、实现过程（前后端源码）

1、上传路径设置

鉴于很多人没有服务器或虚机，我就用本地作为示例，首先我们先创建一个maven项目工程，众所周知，java运行后都是编译成class文件，所以我们将上传的路径设置在classes下的template里。
获取存放文件路径的方式：

String filePath =this.getClass().getResource("/template/").getPath();

2、java接口实现源码（核心）

具体java实现代码如下（其中所需要的插件需要自己引入）：

@Override
    public void uploadTemplate(MultipartFile file) throws Exception {
        boolean b=upload(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(filePath+fileName);
            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），用于选择上传文件的临时节点，如下所示：

<input
     type="file"
     class="upload_file"
     @change="upload_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形式。
【Java实现文件上传】java后端+vue前端实现文件上传全过程详解（附源码）