ElementUI实现手动上传

目的

点击上传按钮是只是本地展示上传信息 点击确定按钮时调用上传接口 实现上传功能

实现方案

1. ElementUI的上传有auto-upload属性 :是否在选取文件后立即进行上传
2. ElementUI的上传自带submit方法 :手动上传文件列表

H5代码块

<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="apis.url"
        :on-preview="handlePreview"
        :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>

JS代码块

export default {
  data() {
    return {
      uploadVisible: false,
      labelPosition: "left",
      uploadform:{
        docType: {
          crFile: []
        }
      },
    }
  },
  methods: {
    uploadOpen(){
      var vm = this;
      vm.uploadform.docType.crFile=[];
      vm.uploadVisible= true;
    },
    handlePreview(file) {
      var fileUrl = library.isEmpty(file.url) ? file.response.url : file.url;
      fileUrl = fileUrl.indexOf(apis.api_file_urlNew) >= 0 ? fileUrl : (apis.api_file_urlNew + fileUrl);
      window.open(fileUrl);
    },
    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;
      }
    },
  }
}

效果展示

接口调用参数截图