Vue实现附件上传功能

2023-07-24 01:27:04 318

本文实例为大家分享了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，因此这个字段随便写就好，不写不行好像


选取文件

支持上传{{strRebuild(fileType)}}格式，且不超过{{fileSize}}M

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

exportdefault{
data(){
return{
//附件列表
fileList:[],
//允许的文件类型
fileType:['xls','xlsx','pdf','doc','docx','txt','jpg','png','jpeg'],
//运行上传文件大小，单位M
fileSize:10,
}
},
methods:{
//清空表单
clear(){
//清空附件
this.$refs.upload.clearFiles()
},

//附件检查
//检查附件是否属于可上传类型
//检查附件是否超过限制大小
checkFile(){
varflag=true
vartip=''
varfiles=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)
}
returnflag
},

//提交附件
submitUpload(){
if(this.checkFile()){
console.log('上传附件...')
this.$refs.upload.submit()
}else{
console.log('取消上传')
}
},

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

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

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

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

工具类JS

strUtil.js

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

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

message.js

import{Message}from'element-ui'

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

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

API

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

后端接口

/**
*单文件上传
*@paramfiles接收文件要以数组接收
*@return
*/
@PostMapping(value="/uploadFile")
publicvoiduploadFile(@RequestBodyMultipartFile[]files){
//TODO
}

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

Vue实现附件上传功能

热门推荐

随机推荐