vue配合elementUI和阿里云oss直传音频文件

1,495 阅读1分钟

<el-upload
          class="upload-demo1"
          ref="upload"
          :action="countUrl"
          :data="uploadInfo"
          :on-change="handleChange"
          :before-upload="handleUpload"
          :auto-upload="false"
          :show-file-list="false"
          :accept="'.mp3,.wav'"
          :limit="500"
          :on-exceed="handleExceed"
          drag
          multiple>
          <!-- <i class="el-icon-upload"></i> -->
          <i class="icon-upload left uploadbg1"></i>
          <div class="left uploadText1">
            <div class="el-upload__text">点击或拖动文件到虚线框内上传</div>
            <p class="left el-upload__text">支持多选文件,支持.mp3、wav格式文件</p>
          </div>
          <span slot="footer" class="dialog-footer">
              <el-button @click="uploadClose" size="small" type="cancel">取消</el-button>
              <el-button type="primary" @click="submitUpload" size="small">上传</el-button>
        </span>
submitUpload() {
      if (this.fileCount == 0) {
        return this.$message.error({
          message: '请选择上传文件',
          duration: 2000
        })
      }
      if (this.cleaUploadFiles) {
        this.$refs.upload.clearFiles()
        this.fileCount = 0
        this.cleaUploadFiles = false
        return this.$message.error({
          message: '当前限制上传mp3、wav格式内音频文件,请从新选择!',
          duration: 2000
        })
      }
      let obj = {}
      obj.companyId = this.companyValueId
      // obj.companyId = this.value
      obj.fileCount = this.fileCount
      if (this.isTrue) {
        this.isTrue = false
        this.$tools.commonAjaxGet('xxx', obj, (res) => {
          if (res.status == 200) {
            this.countUrl = res.data.host
            this.uploadInfo.OSSAccessKeyId = res.data.accessid
            this.uploadInfo.policy = res.data.policy
            this.uploadInfo.callback = res.data.callback
            this.uploadInfo.signature = res.data.signature
            this.uploadInfo.key = res.data.dir
            this.uploadInfo.keyName = res.data.dir
            let that = this
            this.$nextTick(() => {
              that.$refs.upload.submit()
              that.uploadisTrue = false
              this.companyValueId = ''
              this.listLoad()
              setTimeout(() => {
                this.isTrue = true
              }, 1000)
            })
          }
        })
      }
    }
    handleChange(file, fileList) {
      this.fileCount = fileList.length
      console.log(file)
      console.log(file.raw)
      const isType = file.raw.type === 'audio/wav' || file.raw.type === 'audio/mp3' || file.raw.type === 'audio/mpeg'
      if (!isType) {
        this.cleaUploadFiles = true
      }
    }