上传方案一:
先将文件上传到七牛,再将七牛上传返回的文件访问路径上传到服务器
<div class="upload-music-container"> <el-upload class="upload-music" ref="upload" action="http://up-z2.qiniup.com/" :data="{token:uploadToken}" multiple accept=".mp3" :before-upload="uploadBefore" :on-change="uploadChange" :on-success="uploadSuccess" :on-error="uploadError"> <el-button size="small" type="primary">选取文件</el-button> <div slot="tip" class="el-upload__tip">仅支持上传mp3文件,文件大小不超过500M</div> </el-upload> <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button></div> 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' }) }) }, } }
新闻热点
疑难解答
图片精选