使用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
export default {
name: 'uploadMusic',
data() {
return {
fileType:'video',
fileData: new FormData(),
headers:{},
}
},为了实现图片的添加删除，可在on-change与on-remove事件中取得filelist（filelist实质就是uploadFiles的别名，而uploadFiles就是element内置的用于保存待上传文件或图片的数组），在最后一步提交的过程中，将filelist中的值一一添加到formdata对象中（formdata.append()添加，formdata.delete()删除），然后统一上传。
关于使用element-ui怎么实现一个多文件上传功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
