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 相关文章推荐
Jquery从头学起第四讲 jquery入门教程
Aug 01 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
Apr 10 Javascript
jQuery拖拽插件gridster使用指南
Apr 21 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
NW.js 简介与使用方法
Feb 01 Javascript
JavaScript闭包原理与用法实例分析
Aug 10 Javascript
详解vue-cli 脚手架 安装
Apr 16 Javascript
jquery实现上传图片功能
Jun 29 jQuery
jQuery实现tab栏切换效果
Dec 22 jQuery
如何使用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下读取文本文件的代码
2008/07/02 PHP
深入分析PHP引用(&amp;)
2014/09/04 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
读jQuery之七 判断点击了鼠标哪个键的代码
2011/06/21 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
2015/06/01 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
dul无法加载bootstrap实现unload table/user恢复
2016/09/29 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
element-ui 中使用upload多文件上传只请求一次接口
2019/07/19 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
2019/10/28 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
python生成随机mac地址的方法
2015/03/16 Python
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
解决Tensorflow使用pip安装后没有model目录的问题
2018/06/13 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
django2笔记之路由path语法的实现
2019/07/17 Python
PyCharm Community安装与配置的详细教程
2020/11/24 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
台湾良兴购物网:EcLife
2019/12/01 全球购物
高一物理教学反思
2014/01/24 职场文书
消防战士优秀事迹材料
2014/02/13 职场文书
食品工程专业求职信
2014/06/15 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js