element ui

Question

使用element ui 表单内上传
第一次上传成功、 第二次上传失败
必刷新页面才能上传成功

<template>
  <el-dialog
    title='语料上传'
    width="480px"
    @close="closeDialog" 
    :close-on-click-modal="false"
    :visible.sync="showCorpusUpload">
    <el-form
      :rules='rules'
      ref="corpusUpload"
      :model="corpusUpload"
      label-width="120px">
      <el-form-item label="上传批次：" required prop="loadPath">
        <el-input v-model="corpusUpload.loadPath" class="elinput" placeholder="请输入上传批次"></el-input>
      </el-form-item>
      <el-tooltip placement="bottom">
        <div slot="content" class="bottomtTip">若语音文件没有头信息，则系统按照用户选择的无头语音格式处理；若语音文件有头信息，本项可忽略。</div>
          <el-form-item label="无头语音格式：" prop="dataType">
            <el-select v-model="corpusUpload.dataType" :clearable="true" placeholder="请选择语音格式" class="elinput">
              <el-option
                v-for="item in audioTypeList" 
                :key="item.dataCode" 
                :label="item.describer" 
                :value="item.dataCode">
              </el-option>
            </el-select>
          </el-form-item>
        </el-tooltip>
      <el-form-item label="所属信道："  required prop="channelName">
          <el-select v-model="corpusUpload.channelName" :clearable="true" placeholder="请选择所属信道" class="elinput">
            <el-option
              v-for="item in channelList" 
              :key="item.dataCode" 
              :label="item.describer" 
              :value="item.dataCode">
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="上传方式：" required prop="uploadProtocol">
        <el-radio  v-model="corpusUpload.uploadProtocol" label="LOCAL">本地上传</el-radio>
        <el-radio  v-model="corpusUpload.uploadProtocol" label="true">远程导入</el-radio>
      </el-form-item>
      <el-form-item v-if="corpusUpload.uploadProtocol==='true'" label="文件路径：" required prop="filePath">
        <el-input v-model="corpusUpload.filePath" class="elinput"></el-input>
      </el-form-item>
      <el-upload
        ref="upload"
        :action="baseURL"
        accept=".wav,.mp3,wma,ogg,ape,aac"
        :before-upload="beforeUpload"
        :on-success="uploadSuccess"
        :on-change="handleChange"
        multiple
        :file-list="fileListAdd">
        <el-button class="Btn" v-if="corpusUpload.uploadProtocol==='LOCAL'"><span class="uploadBtn">上传本地语音</span></el-button>
      </el-upload>
      <el-form-item label="用户名：" required prop="userName" v-if="corpusUpload.uploadProtocol==='true'">
        <el-input
          placeholder="请输入用户名"
          v-model.trim="corpusUpload.userName"
          class="elinput"
          ></el-input>
      </el-form-item>
      <el-form-item label="密码： " required prop="password" v-if="corpusUpload.uploadProtocol==='true'"  class="elinputpass">
        <el-input
          placeholder="请输入密码"
          type="password"
          v-model="corpusUpload.password"
          class="elinput"
          ></el-input>
      </el-form-item>
      <div class="inputContainer">
      <el-form-item label="语料描述：" prop="describer">
          <el-input
            class="elinput"
            resize="none"
            type="textarea"
            :rows="4"
            :maxlength="200"
            v-model="corpusUpload.describer">
          </el-input>
          <span>{{corpusUpload.describer.length + '/200字'}}</span>
     </el-form-item>
     </div>
      <div class="bottom">
        <el-button  type="success" @click="save()">保存</el-button>
        <el-button  @click="close()">关闭</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
import checkRules from '../../utils/check'
import { mapState } from "vuex";
export default {
props: [

'isShow',
'userLogin'

],
data () {

return {
  baseURL:"https://base/dw-dm-digit_local/api/files/upload",
  fileListAdd: [], // 上传文件列表
  audioTypeList: [], // 无音文件格式列表
  channelList: [], // 所属信道列表
  uploadForm: new FormData(),   // 一个formdata
  showCorpusUpload: this.isShow, // 弹出框是否显示
  // 上传条件
  corpusUpload: {
    // loadPath: '/'+ this.userLogin+'/'+''+'/',
    loadPath: '', // 上传批次
    appId: 'datawood', // 来源信息
    user: this.userLogin, // 上传人员
    dataType: '', // 数据格式
    channelName: '', // 所属信道
    uploadProtocol: 'LOCAL', // 上传方式
    filesNum: '',
    filesSize: '',
    describer: '', // 描述
    // userName: '', // 用户名
    // password: '', // 密码
  },
  rules: {
    loadPath: [ // 上传批次校验
      { validator: checkRules.checkUploadNum, required: true }
    ],
    filePath: [ // 文件路径校验
      { validator: checkRules.checkfilePath, required: true }
    ],
    channelName: [ // 所属信道
      { required: true, message: '请选择所属信道' }
    ],
    dataType: [ // 上传方式
      { message: '请选择语音文件格式' }
    ],
    userName: [ // 用户名
      {validator: checkRules.checkUserName},
      {type: 'string', required: true, message: '用户名必填'}
    ],
    password: [ // 密码
      {validator: checkRules.checkPassword},
      {type: 'string', required: true, message: '密码必填'}
    ]
  }
}

},
methods: {

...mapState(["user"]),
// 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
handleChange(file, fileList) {
  this.fileListAdd.push(file)
},
// 保存按钮
save() {
  this.$refs['corpusUpload'].validate((valid) => {
    if (valid) {
      this.uploadForm.append('loadPath', '/'+ this.userLogin+'/'+this.corpusUpload.loadPath+'/')
      this.uploadForm.append('appId', this.corpusUpload.appId)
      this.uploadForm.append('user', this.corpusUpload.user)
      this.uploadForm.append('dataType', this.corpusUpload.dataType)
      this.uploadForm.append('channelName', this.corpusUpload.channelName)
      this.uploadForm.append('uploadProtocol', this.corpusUpload.uploadProtocol)
      this.uploadForm.append('filesNum', this.corpusUpload.filesNum)
      this.uploadForm.append('filesSize', this.corpusUpload.filesSize)
      this.uploadForm.append('describer', this.corpusUpload.describer)
      this.$api.corpus.upLoadVoice(this.uploadForm).then(res => {
        this.$message('上传成功！')
        this.$emit('inquire')
        vm.$refs.upload.fileListAdd.length = 0;
      })
      this.showCorpusUpload = false
      this.$refs['corpusUpload'].resetFields() // 重置字段
    }
  })
},
uploadSuccess () {
  //  this.$message('上传成功！')
},
// 关闭按钮
close () {
  this.$refs['corpusUpload'].resetFields() // 重置字段
  this.$emit('on-show-change')
  this.fileListAdd = [] // 清空上传列表
},
// 关闭对话框
closeDialog () {
  this.$refs['corpusUpload'].resetFields() // 重置字段
  this.fileListAdd = [] // 清空上传列表
},
// 上传文件之前
beforeUpload (file) {
  const extension = file.name.split('.')[1] === 'mp3'
  const extension1 = file.name.split('.')[1] === 'wav'
  const extension2 = file.name.split('.')[1] === 'wma'
  const extension3 = file.name.split('.')[1] === 'ogg'
  const extension4 = file.name.split('.')[1] === 'ape'
  const extension5 = file.name.split('.')[1] === 'aac'
  const isLt500M = file.size / 1024 / 1024 < 500
  if (!extension && !extension1 && !extension2 && !extension3 && !extension4 && !extension5) {
    this.$message.error( '文件上传的格式不正确')
  }  else if (!isLt500M) {
    this.$message.error('上传文件大小不能超过500MB!')
  }
  this.uploadForm.append('files',file)
  return false
}

},
watch: {

isShow (val) {  // 父组件传入值
  this.showCorpusUpload = val
  // 字典表数据
  this.$api.corpus.dictionary().then(res => {
    this.audioTypeList = res.filter(item => item.typeCode === 'noHeadAudio')
    this.channelList = res.filter(item => item.typeCode === 'channel')
  })
},
showCorpusUpload (val) {  // 当前组件show值传入父组件
  this.$emit('on-show-change', val)
},
corpusUploadShow (val) {  // 接口请求中改变的show值
  this.showCorpusUpload = val
}

}
}
</script>