系列文章目录

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实战篇五：实现文件上传

文章目录

系列文章目录
一、背景
二、上传文件实现
- 2.1 准备后端接口
- 2.2 前端页面上传
- 2.3 测试

一、背景

文件上传是企业开发经常遇到的一个需求，在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-uploadref="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 = trueisLt2M = file.size / 1024 / 1024 < 100if (!isLt2M) {this.loading = falsethis.$message.error('上传文件大小不能超过 100MB!')}this.filename = file.namereturn 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 测试

Vue实战篇五：实现文件上传相关推荐

[网络安全学习篇60]：文件上传
引言:我的系列博客[网络安全学习篇]上线了,小编也是初次创作博客,经验不足:对千峰网络信息安全开源的视频公开课程的学习整理的笔记整理的也比较粗糙,其实看到目录有300多集的时候,讲道理,有点怂了,所以 ...
【《编辑器篇》kindeditor 文件上传漏洞利用】
<编辑器篇>kindeditor 文件上传漏洞利用一.漏洞描述 KindEditor是一套开源的HTML可视化编辑器,其采用的开发语言支持asp.aspx.php ...
vue+element-ui+axios+springboot实现文件上传下载
前端技术:vue,element-ui,axios 后台技术:springboot 本篇博客只给出关键的代码,提供思路,完全的涉及保密不方便提供一,上传: 上传element组件代码,支持多文件,拖 ...
[网络安全自学篇] 三十三.文件上传之绕狗一句话原理和绕过安全狗（六）
这是作者的系列网络安全自学教程,主要是关于安全工具和实践操作的在线笔记,特分享出来与博友们学习,希望您们喜欢,一起进步.前文详细讲解了Upload-labs靶场及文件上传漏洞20道CTF题目,并结合C ...
[网络安全自学篇] 三十一.文件上传之Upload-labs靶场及CTF题目01-10（四）
这是作者的系列网络安全自学教程,主要是关于安全工具和实践操作的在线笔记,特分享出来与博友们学习,希望您们喜欢,一起进步.前文分享了编辑器漏洞和IIS高版本文件上传漏洞,包括FCKeditor.eWeb ...
[网络安全自学篇] 三十.文件上传漏洞、编辑器漏洞和IIS高版本漏洞及防御（三）
这是作者的系列网络安全自学教程,主要是关于安全工具和实践操作的在线笔记,特分享出来与博友共勉,希望您们喜欢,一起进步.前文分享了文件上传漏洞和IIS6.0解析漏洞,包括PHP345文件绕过上传.Win ...
一个基于Vue的移动端多文件上传插件，支持常见图片的上传。
特性多文件上传上传图片预览上传状态监测删除指定图片清空图片重新上传安装 npm i vue-easy-uploader --save 使用在入口文件main.js中加入以下代码: im ...
《编辑器篇》kindeditor 文件上传漏洞利用
前言~ 只要你静下心来你能做好绝大多数事情目录导航漏洞描述漏洞条件实战利用修补方案一.漏洞描述 KindEditor是一套开源的HTML可视化编辑器,其采用的开发语言支持asp.aspx ...
JavaWeb学习总结(五十)——文件上传和下载
在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用 ...

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