ElementUI实现手动上传

在做项目中，与同事遇到问题，顺手记录一下

<template>
  <div class="common-layout">
   <el-button size="mini" type="primary" @click="uploadOpen" >
 上传测试文件
</el-button>
<!-- 弹框 -->
<el-dialog
  title="上传测试文件"
  :visible.sync="uploadVisible"
  width="60%"
  :close-on-click-modal="false"
>
  <el-form ref="uploadform" 
      :model="uploadform" 
      label-width="110px" 
      :label-position="labelPosition" 
      size="small"
  >
    <el-form-item label="上传测试文件" prop="docType.crFile" ref="crFile">
      <el-upload
        ref="doctypeCrfile"
        :file-list="uploadform.docType.crFile"
        :data="{text:'测试数据'}"
        :auto-upload="false"
        action="/api/videoTranscribe?languageCode=en-US"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
         multiple
        :limit="9999"
        :on-exceed="handleExceed"
        :on-success="handleSuccess"
      >
        <el-button size="mini" type="primary">点击上传</el-button>
      </el-upload>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button size="mini" type="primary" @click="uploadConfirm">确 定</el-button>
    <el-button size="mini" @click="uploadVisible= false">关 闭</el-button>
  </span>
</el-dialog>

  </div>
</template>
<script>
export default {
  data() {
    return {
      uploadVisible: false,
      labelPosition: "left",
      uploadform:{
        docType: {
          crFile: []
        }
      },
    }
  },
  methods: {
    uploadOpen(){
      var vm = this;
      vm.uploadform.docType.crFile=[];
      vm.uploadVisible= true;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      for (var i = 0; i < this.fileList.length; i++) {
        if (this.fileList[i].uid == file.uid) {
          this.fileList.splice(i, 1);
          break;
        }
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(`最多上传 ${this.limit} 个文件`);
    },
       beforeRemove(file, fileList) {
      if (this.Qualified == "") {
        return this.$confirm(`确定移除 ${file.name}？`);
      } else if (this.Qualified == "1") {
        return true;
      }
    },
    // 上传测试文件
    uploadConfirm(){
      var vm = this;
      vm.$refs.doctypeCrfile.submit();
    },
    handleSuccess(response){
      if(response.code==200){
        this.$message.success('上传成功');
        this.uploadVisible=false;
      }
    },
  }
}
</script>
<style lang="scss" scoped>

</style>

 

参考链接：

https://blog.csdn.net/yangwqi/article/details/101520826