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 相关文章推荐
JavaScript 无符号右移运算符
Apr 17 Javascript
javascript基础知识大集锦(二) 推荐收藏
Jan 13 Javascript
给js文件传参数(详解)
Jul 13 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 Javascript
javascript基本算法汇总
Mar 09 Javascript
ES6生成器用法实例分析
Apr 10 Javascript
React Native react-navigation 导航使用详解
Dec 01 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
微信小程序ibeacon三点定位详解
Oct 31 Javascript
vue实现购物车小案例
Sep 27 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 Javascript
vue-router的hooks用法详解
Jun 08 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和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
基于PHP5魔术常量与魔术方法的详解
2013/06/13 PHP
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
PHP curl伪造IP地址和header信息代码实例
2015/04/27 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
js confirm()方法的使用方法实例
2013/07/13 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
javascript实现的上下无缝滚动效果
2016/09/19 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
VUE重点问题总结
2018/03/19 Javascript
vue 权限认证token的实现方法
2018/07/17 Javascript
原生js实现获取form表单数据代码实例
2019/03/27 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
实例Python处理XML文件的方法
2015/08/31 Python
Python的语言类型(详解)
2017/06/24 Python
Python3 SSH远程连接服务器的方法示例
2018/12/29 Python
在PyCharm中批量查找及替换的方法
2019/01/20 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
python时间日期操作方法实例小结
2020/02/06 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
班级出游活动计划书
2014/08/15 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书
匿名检举信范文
2015/03/02 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP
python 字典和列表嵌套用法详解
2021/06/29 Python