Vue实现附件上传功能


Posted in Javascript onMay 28, 2020

本文实例为大家分享了Vue实现附件上传的具体代码,供大家参考,具体内容如下

前言

前端 UI 是用的是 element-ui 的上传功能

本文主要记录下代码,方便下次复制粘贴

前端部分

HTML

  • limit: 限制文件个数 1 个
  • on-remove: 移除附件时的钩子函数,主要就 console 输出下
  • on-error: 用于处理上传异常后的处理,本人这主要用来关闭弹窗和全屏等待
  • file-list: 绑定附件
  • auto-upload: 禁止自动上传,true 的话选了文件就自动上传
  • http-request: 自定义上传文件请求方法,默认方法会与 mock 产生 XmlRequest 重新生成导致找不到文件问题,我注释了 mock 还是那样,没具体研究
  • action: 原上传文件的路径,由于使用了自定义上传文件请求,即 http-request,因此这个字段随便写就好,不写不行好像
<el-upload
 ref="upload"
 :limit="1"
 :on-remove="handleRemove"
 :on-error="onError"
 :file-list="fileList"
 :auto-upload="false"
 :http-request="uploadFile"
 action="https://jsonplaceholder.typicode.com/posts/"
 class="upload-demo">
 <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
 <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
 <div slot="tip" class="el-upload__tip">支持上传 {{ strRebuild(fileType) }} 格式,且不超过 {{ fileSize }}M</div>
</el-upload>

JS

import { strRebuild, lastSubstring } from '@/utils/strUtil'
import { message } from '@/utils/message'

export default {
 data() {
 return {
 // 附件列表
 fileList: [],
 // 允许的文件类型
 fileType: ['xls', 'xlsx', 'pdf', 'doc', 'docx', 'txt', 'jpg', 'png', 'jpeg'],
 // 运行上传文件大小,单位 M
 fileSize: 10,
 }
 },
 methods: {
 // 清空表单
 clear() {
 // 清空附件
 this.$refs.upload.clearFiles()
 },
 
 // 附件检查
 // 检查附件是否属于可上传类型
 // 检查附件是否超过限制大小
 checkFile() {
 var flag = true
 var tip = ''
 var files = this.$refs.upload.uploadFiles
 files.forEach(item => {
 // 文件过大
 if (item.size > this.fileSize * 1024 * 1024) {
 flag = false
 tip = ' 文件超过' + this.fileSize + 'M'
 }
 // 文件类型不属于可上传的类型
 if (!this.fileType.includes(lastSubstring(item.name, '.'))) {
 flag = false
 tip = ' 文件类型不可上传'
 }
 })
 if (!flag) {
 message('error', tip)
 }
 return flag
 },
 
 // 提交附件
 submitUpload() {
 if (this.checkFile()) {
 console.log('上传附件...')
 this.$refs.upload.submit()
 } else {
 console.log('取消上传')
 }
 },

 // 自定义文件上传方法
 uploadFile(file) {
 // 把文件放入 FormData 进行提交
 const param = new FormData()
 param.append('files', file.file)
 uploadFile(param).then(response => {
 // TODO 一些关闭弹框,上传成功提示等
 })
 },

 // 移除附件
 handleRemove(file, fileList) {
 console.log('移除附件...')
 },

 // 附件上传失败,打印下失败原因
 onError(err) {
 message('error', '附件上传失败')
 console.log(err)
 },

 // 字符串重组
 strRebuild(str) {
 return strRebuild(str)
 }
 }
}

工具类 JS

strUtil.js

// 字符串相关工具类
// 数组根据分隔符重组为字符串
export function strRebuild(arr, split) {
 if (arr === undefined || arr === null || !(arr instanceof Array) || arr.length === 0) {
 return ''
 }
 if (split === undefined || split === null) {
 split = ','
 }
 var str = ''
 arr.forEach((v, i) => {
 if (i === arr.length - 1) {
 str = str + v
 } else {
 str = str + v + split
 }
 })
 return str
}

// 截取最后一个特定字符后面的字符串
export function lastSubstring(str, split) {
 if (str === undefined || str === null || split === undefined || split === null) {
 return ''
 }
 return str.substring(str.lastIndexOf(split) + 1)
}

message.js

import { Message } from 'element-ui'

// 提示封装 type 提示类型, msg 提示信息,duration 持续时间
export function message(type, msg, duration) {
 Message({
 message: msg || 'success',
 type: type || 'success',
 duration: duration || 5 * 1000
 })
}

// 带删除键提示,duration 为 0 时,不会自动消失
// 提示封装 type 提示类型, msg 提示信息,duration 持续时间
export function messageShowClose(type, msg, duration) {
 Message({
 message: msg || 'success',
 type: type || 'success',
 duration: duration || 0,
 showClose: true
 })
}

API

// 附件上传
export function uploadFile(file) {
 return request({
 url: '/uploadFile',
 method: 'post',
 headers: {
 'Content-Type': 'multipart/form-data; charset=utf-8'
 },
 data: file
 })
}

后端接口

/**
 * 单文件上传
 * @param files 接收文件要以数组接收
 * @return
 */
@PostMapping(value="/uploadFile")
public void uploadFile(@RequestBody MultipartFile[] files) {
 // TODO
}

更多文章可以点击《Vue.js前端组件学习教程》学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
可输入的下拉框
Jun 19 Javascript
基于jQuery制作迷你背词汇工具
Jul 27 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 Javascript
js中call与apply的用法小结
Dec 28 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
Javascript动态创建表格及删除行列的方法
May 15 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
vue axios基于常见业务场景的二次封装的实现
Sep 21 Javascript
如何使用Javascript中的this关键字
May 28 #Javascript
简单了解JavaScript arguement原理及作用
May 28 #Javascript
如何使用JavaScript检测空闲的浏览器选项卡
May 28 #Javascript
js实现轮播图特效
May 28 #Javascript
JS写滑稽笑脸运动效果
May 28 #Javascript
Python版实现微信公众号扫码登陆
May 28 #Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
May 28 #Javascript
You might like
php常用Stream函数集介绍
2013/06/24 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
Windows服务器中PHP如何安装redis扩展
2019/09/27 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
用JQUERY增删元素的代码
2012/02/14 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
简单了解Python中的几种函数
2017/11/03 Python
python判断完全平方数的方法
2018/11/13 Python
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
介绍一下Linux文件的记录形式
2012/04/18 面试题
工程管理英文求职信
2014/03/18 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
上海世博会口号
2014/06/19 职场文书
农业项目建议书
2014/08/25 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
职工年度考核评语
2014/12/31 职场文书
埃及王子观后感
2015/06/16 职场文书
毕业季聚会祝酒词!
2019/07/04 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
sql server 累计求和实现代码
2022/02/28 SQL Server