element 附件上传

<el-form-item label="合同扫描件" prop="files" ref="upload-file">
      <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :auto-upload="false"
        :on-change="handleStatus"
        :on-exceed="handleExceed"
        :show-file-list="false"
        :http-request="uploadFile"
        accept=".pdf,.ofd"
        :file-list="fileList">
        <el-button size="small" type="primary">+点击上传</el-button>
        <div slot="tip" class="el-upload__tip"><i>*</i>仅支持上传一个合同扫描件，支持ofd及pdf格式文件</div>
      </el-upload>
      <el-table :data="attachments" border style="width: 650px">
        <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
        <el-table-column prop="name" label="合同名称" align="center"></el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handlePreview(scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="handleDel(scope.row,scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>

data

上传，删除等fan

 handleRemove(file, fileList) {
      this.attachments = fileList
    },
    handleExceed(files, fileList) {
      // this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    /** 浏览*/
    handlePreview(row) {
      //hasOwnProperty方法返回一个布尔值,判断自身属性是否存在,循环的是那个列表
      if(row.hasOwnProperty('raw')){
        let pdfUrl = URL.createObjectURL(row.raw)
        window.open(pdfUrl);
      }else{
        getContractPreview(row).then(response => {
          window.open(response.data.data);
        });
      }
    },
    /* 文件必传验证 */
    handleStatus(file, fileList){
      let patrn = /^[^`!@#$%^&*<>]+$/
      if (!patrn.test(file.name)) {// 如果包含特殊字符返回false
        this.msgSuccess('文件名称不能有特殊字符');
        return false;
      }
      if (fileList.length > 1) {
        fileList.splice(0, 1);
      }
      // 替换文件
      // for(let i = 0; i<this.attachments.length; i++){
      //   // if(file.name === this.attachments[i].name){
      //     // this.msgSuccess('替换' + file.name);
      //     this.ruleForm.files = this.attachments[i];
      //   //   return
      //   // }
      // }
      // this.attachments.push(file)
      this.attachments = fileList
      this.ruleForm.files = this.attachments;
      this.isChange = false
    },
    uploadFile(file){
        // console.log(file.file)
    },
    handleDel(params,index){
       if(params.hasOwnProperty('fileId')){
         this.delLocalFile.push(params.fileId)
       }
      this.attachments.splice(index,1)
      this.ruleForm.files = this.attachments
    },

提交方法中

目前此方法只能上传一个附件，再保存前附件没有上传到服务器，保存之后附件上传到服务器，保存前只是再本地的表格中进行增删改查，保存后后台返回的附件带有id,若有id的删除后把id存起来传给后台