好资源导航 » 文章资讯 » element-ui多文件上传的实现示例

element-ui多文件上传的实现示例

2023-08-24 19:21:05 73

上传方案一：

先将文件上传到七牛，再将七牛上传返回的文件访问路径上传到服务器



选取文件
仅支持上传mp3文件，文件大小不超过500M

上传到服务器

exportdefault{ name:'uploadMusic', data(){ return{ headers:{}, uploadToken:null, canUploadMore:true, fileList:null, } }, created(){ this.headers={}//此处需要与server约定具体的header this.getUploadToken() }, methods:{ //获取上传七牛token凭证 getUploadToken(){ this.$http.get('xxxxxxx',{headers:this.headers}).then(response=>{ if(response.data.status==200){ letresp=response.data.data this.uploadToken=resp.token }else{ this.$message({ message:'获取凭证失败，请重试', type:'error' }) } }) }, //获取音频文件时长 getVideoPlayTime(file,fileList){ letself=this //获取录音时长 try{ leturl=URL.createObjectURL(file.raw); //经测试，发现audio也可获取视频的时长 letaudioElement=newAudio(url); letduration; audioElement.addEventListener("loadedmetadata",function(_event){ duration=audioElement.duration; file.duration=duration self.fileList=fileList }); }catch(e){ console.log(e) } }, //校验上传文件大小 uploadChange(file,fileList){ this.fileList=fileList lettotalSize=0 for(letfileoffileList){ totalSize+=file.raw.size } if(totalSize>500*1024*1024){ this.canUploadMore=false this.$message({ message:'上传文件不能不超过500M', type:'warn' }) }else{ this.canUploadMore=true } }, uploadBefore(file){ if(this.canUploadMore){ returntrue } returnfalse }, //上传成功 uploadSuccess(response,file,fileList){ this.getVideoPlayTime(file,fileList) }, //上传失败 uploadError(err,file,fileList){ console.log(err) }, //上传服务器数据格式化 getUploadMusicList(){ letmusicList=[] for(letfileofthis.fileList){ if(file.response&&file.response.key){ musicList.push({ "play_time":file.duration,//播放时长 "size":file.size/1024,//文件大小单位kb "song_name":file.name,//歌曲名 "voice_url":"xxxx"//上传七牛返回的访问路径 }) } } returnmusicList }, //上传至服务器 submitUpload(){ letmusicList=this.getUploadMusicList() this.$http.post('xxxxxxxxxx',{music_list:musicList},{headers:this.headers}).then(response=>{ if(response.data.status==200){ this.$refs.upload.clearFiles()//上传成功后清空文件列表 this.$message({ message:'上传服务器成功', type:'success' }) }else{ this.$message({ message:'上传服务器失败，请重试', type:'error' }) } }).catch(err=>{ this.$message({ message:'上传服务器失败，请重试', type:'error' }) }) }, } }

上传方案二：

直接将文件上传到服务器



选取文件
上传到服务器
只能上传mp3文件，且单次不超过500M

exportdefault{ name:'uploadMusic', data(){ return{ fileType:'video', fileData:newFormData(), headers:{}, } },

补充：element-ui实现多文件加表单参数上传

element-ui是分图片多次上传，一次上传一个图片。

如果想一次上传多个图片，就得关掉自动上传：auto-upload=‘false'，同时不使用element内置上传函数，换成自己写的onsubmit()

为了实现图片的添加删除，可在on-change与on-remove事件中取得filelist（filelist实质就是uploadFiles的别名，而uploadFiles就是element内置的用于保存待上传文件或图片的数组），在最后一步提交的过程中，将filelist中的值一一添加到formdata对象中（formdata.append()添加，formdata.delete()删除），然后统一上传。

ps：on-preview事件和组件以及对应属性、方法这一体系是用来实现图片的点击放大功能。被注释掉的beforeupload只有一个实参，是针对单一文件上传时使用到的，这里无法用上

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

返回顶部
514930285
czq8825@qq.com

element-ui多文件上传的实现示例

热门推荐

随机推荐