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的一些总结
Nov 03 Javascript
多浏览器兼容的获取元素和鼠标的位置的js代码
Dec 15 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
javascript中setAttribute()函数使用方法及兼容性
Jul 19 Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 Javascript
JavaScript学习笔记之数组随机排序
Mar 23 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
详解vue 实例方法和数据
Oct 23 Javascript
浅谈AngularJS中$http服务的简单用法
May 15 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制作新闻系统的思路
2006/10/09 PHP
杏林同学录(五)
2006/10/09 PHP
php中的时间显示
2007/01/18 PHP
PHP多例模式介绍
2013/06/24 PHP
php使用递归函数实现数字累加的方法
2015/03/16 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
JavaScript 学习技巧
2010/02/17 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
Listloading.js移动端上拉下拉刷新组件
2016/08/04 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
基于python实现学生管理系统
2018/10/17 Python
Python自动化运维之Ansible定义主机与组规则操作详解
2019/06/13 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
Django 反向生成url实例详解
2019/07/30 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
2014/11/05 HTML / CSS
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
图书馆志愿者活动总结
2014/06/27 职场文书
新闻学专业求职信
2014/07/28 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
高三英语教学计划
2015/01/23 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
亲情作文之母爱
2019/09/25 职场文书
解决pycharm下载库时出现Failed to install package的问题
2021/09/04 Python
Go语言并发编程 sync.Once
2021/10/16 Golang