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="1"
    :before-upload="beforeUpload"
    :auto-upload="false"
    :headers="headers"
    :on-success="handleSuccess"
    :on-error="handleError"
    :action=" 'localhost:8080/api/localstorage' + '?name=' + filename" >
    <div><i class="el-icon-upload" /> 添加文件</div>
    <div slot="tip" class="el-upload__tip">可上传任意格式文件，且不超过100M</div>
  </el-upload>
  <el-button :loading="loading" type="primary" @click="upload">确认上传</el-button>
</template>

<script>
import { getToken } from '@/utils/auth'
export default {
  name: 'upload',
  data() {
    return {
      loading: false,
      headers: {
        'Authorization': getToken()
      },
      filename: ''
    }
  },
  methods: {
    // 上传文件
    upload() {
      this.$refs.upload.submit()
    },
    beforeUpload(file) {
      let isLt2M = true
      isLt2M = file.size / 1024 / 1024 < 100
      if (!isLt2M) {
        this.loading = false
        this.$message.error('上传文件大小不能超过 100MB!')
      }
      this.filename = file.name
      return isLt2M
    },
    handleSuccess(response, file, fileList) {
      this.$refs.upload.clearFiles()
      this.$notify({
        title: '上传成功',
        type: 'success',
        duration: 2500
      })
    },
    // 监听上传失败
    handleError(e, file, fileList) {
      const msg = JSON.parse(e.message)
      this.$notify({
        title: msg.message,
        type: 'error',
        duration: 2500
      })
      this.loading = false
    }
  }
}
</script>

2.3 测试