Element——vue，文件上传

1.限制文件上传个数，只能上传1个文件

            <div class="file_model">
              <el-form-item label="模型文件:">
                <el-upload
                  class="upload-demo"
                  v-model="formList.fileList"
                  :on-change="onChange"
                  action="#"
                  :class="fileListData.length == 1 ? 'uploadCss' : ''"
                  :file-list="fileListData"
                  :limit="1"
                  :on-exceed="handleExceed"
                  :http-request="uploadModelFile"
                  :on-remove="handleRemove"
                  multiple
                >
                  <i class="el-icon-plus"></i>
                  <div slot="tip" class="el-upload__tip text_title">(上传文件时请先输入模型名称)</div>
                </el-upload>
              </el-form-item>
            </div>

data(){
 rreturn:{
     formList:{
      		fileList:''
      	},
      fileListData:[], 
	 }
 },
 methods:{
 	//上传文件一
    uploadModelFile(file) {
      ......
    },
	//文件删除
    handleRemove(file, list) {
      	......
    },
	 handleExceed(files, fileList) {
      this.$message.error('只能上传1个文件');
     },
    // 限制文件上传的个数
    onChange(file, list) {
      this.fileListData = list;
      if (list.length > 0) {
        this.formList.fileList = [1];
      }
      this.isModelFile = true;
      this.formList.fileList = list; // 对文件列表中添加已上传成功的文件
      if (list.length > 1 && file.status !== 'fail') {
        list.splice(0, 1);
      } else if (file.status === 'fail') {
        this.$message.error('上传失败，请重新上传！');
        list.splice(0, 1);
      }
    },
}

css:

  .file_params {
    padding-left: 58px;
  }
  /deep/ .el-upload {
    width: 190px;
    height: 80px;
    background: #f3f3f3;
    border: 1px dashed rgba(119, 119, 119, 0.3);
  }
  /deep/ .el-icon-plus {
    font-size: 32px;
    color: #707070;
    margin-top: 20px;
  }
  .uploadCss {
    /deep/ .el-upload.el-upload--text {
      display: none;
    }
    /deep/ .el-upload__tip.text_title {
      display: none;
    }
  }

2.上传多个文件

            <div class="file_model file_params">
              <el-form-item label="多个文件:">
                <el-upload
                  class="upload-demo"
                  :on-change="onChangeParams"
                  v-model="formList.paramsList"
                  action="#"
                  :file-list="fileListList"
                  :on-remove="modelHandleRemove"
                  multiple
                >
                  <i class="el-icon-plus"></i>
                  <div slot="tip" class="el-upload__tip text_title">(上传文件时请先输入名称)</div>
                </el-upload>
              </el-form-item>
            </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="sureClick()" :loading="isLoading">保存</el-button>
          <el-button @click="cancel('formList')">取 消</el-button>
        </div>

data(){
 rreturn:{
     formList:{
      		paramsList:''
      	},
      fileListList:[], 
	 }
 },
 methods:{
	onChangeParams(file, list) {
      if (list.length !== 0) {
        this.formList.paramsList = [1];
      }
      this.isParamsFile = false;
      this.paramsFile = file.raw;
      this.params_file_name = file.raw.name;

      let params_file_identify = file.raw.name;
      this.list.push({//按照接口传参要求 传文件参数
        name: this.paramsFile.name.split('.')[0],
        params_file_identify,
        path: file.raw.path,
        file_suffix: this.paramsFile.name.split('.')[1]
      });
      //文件去重
      let newArr = [];
      let fileNewArr = [];
      this.list.map(item => {
        let index = newArr.findIndex(v => item.params_file_identify == v.params_file_identify);
        if (index === -1) {
          newArr.push(item);
          fileNewArr.push({
            name: item.params_file_identify,
            path: item.path,
            params_file_identify: item.params_file_identify,
            file_suffix: item.file_suffix
          });
        } else {
          newArr.splice(index, 1, item);
          fileNewArr.splice(index, 1, {
            name: item.params_file_identify,
            path: item.path,
            params_file_identify: item.params_file_identify,
            file_suffix: item.file_suffix
          });
        }
      });
      this.list = newArr;
      this.fileListList = fileNewArr;
    },
},


    //删除的参数文件id
    modelHandleRemove(file, fileList) {
      this.removeId = file.id;
      this.removeArr.push(this.removeId);
      let list = [];
      fileList.forEach(v => {
        list.push({
          name: v.file_name ? v.file_name.split('.')[0] : v.name.split('.')[0],
          params_file_identify: v.name || v.file_identify || v.params_file_identify,
          file_suffix: v.file_suffix,
          path: v.id || v.path
        });
      });
      this.fileListList = fileList;
      this.list = list;
    },
     sureClick() {
            if (!this.rowId) {
        this.$refs.formList.validate(async valid => {
          if (valid) {
            this.isLoading = true;
                  if (this.fileListList.length !== 0) {
        this.add_file_params(this.list[time], 1);//上传多个文件
        time = time + 1;
        if (this.list[time]) {
          this.useUploadSftp();
        } else {
          this.dialogFormVisible = false;
          this.isLoading = false;
          this.addData();//调列表接口
        }
      }

                });
              }
            });
          }
        });
      } 
     },