首页 > 语言 > JavaScript > 正文

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

2024-05-06 15:40:50
字体:
来源:转载
供稿:网友

上传方案一:

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

<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'     })    })   },  } }            
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选