使用element-ui怎么实现一个多文件上传功能

这篇文章将为大家详细讲解有关使用element-ui怎么实现一个多文件上传功能，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名与空间、雅安服务器托管、营销软件、网站建设、蜀山网站维护、网站推广。

上传方案一：

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


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

上传到服务器

export default { 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) { let resp = response.data.data this.uploadToken = resp.token } else { this.$message({ message: '获取凭证失败，请重试', type: 'error' }) } }) }, //获取音频文件时长 getVideoPlayTime(file, fileList) { let self = this //获取录音时长 try { let url = URL.createObjectURL(file.raw); //经测试，发现audio也可获取视频的时长 let audioElement = new Audio(url); let duration; 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 let totalSize = 0 for (let file of fileList) { 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) { return true } return false }, //上传成功 uploadSuccess(response, file, fileList) { this.getVideoPlayTime(file, fileList) }, //上传失败 uploadError(err, file, fileList) { console.log(err) }, //上传服务器数据格式化 getUploadMusicList() { let musicList = [] for (let file of this.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" //上传七牛返回的访问路径 }) } } return musicList }, //上传至服务器 submitUpload() { let musicList = 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

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

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

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

关于使用element-ui怎么实现一个多文件上传功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

重庆分公司，新征程启航

使用element-ui怎么实现一个多文件上传功能

其他资讯