Vue实战篇五：实现文件上传

系列文章目录

Vue基础篇一：编写第一个Vue程序
Vue基础篇二：Vue组件的核心概念
Vue基础篇三：Vue的计算属性与侦听器
Vue基础篇四：Vue的生命周期（秒杀案例实战）
Vue基础篇五：Vue的指令
Vue基础篇六：Vue使用JSX进行动态渲染
Vue提高篇一：使用Vuex进行状态管理
Vue提高篇二：使用vue-router实现静态路由
Vue提高篇三：使用vue-router实现动态路由
Vue提高篇四：使用Element UI组件库
Vue提高篇五：使用Jest进行单元测试
Vue提高篇六： 使用Vetur+ESLint+Prettier插件提升开发效率
Vue实战篇一： 使用Vue搭建注册登录界面
Vue实战篇二： 实现邮件验证码发送
Vue实战篇三：实现用户注册
Vue实战篇四：创建多步骤表单
Vue实战篇五：实现文件上传

---

一、背景

• 文件上传是企业开发经常遇到的一个需求，在Element组件库也有现成的Upload组件可以很方便的直接调用。
  

二、上传文件实现

2.1 准备后端接口

• Spring MVC接口中需使用MultipartFile
  
• 接口定义

@RestController
@RequestMapping("/api/localstorage")
@PostMapping
public Object upload(@RequestParam String name, @RequestParam("file") MultipartFile file){
   
// 处理文件上传业务逻辑
...

}

2.2 前端页面上传

• 使用element upload组件

<template>
  <el-upload
    ref="upload"
    :limit