element ui el-upload 多文件限制格式文件上传

场景：上传文件成功后，返回文件路径，通过form表单提交上文件路径，并做表单必填校验
1.结构

<template>
  <el-form
  ref="rulesForm"
  :model="rulesForm"
  :rules="rules"
  label-width="100px"
  class="s-form s-form-spare"
  >
    <el-form-item label="名称：" prop="name">
      <el-input v-model="rulesForm.name" placeholder="请输入协议名称" :maxlength="32" clearable />
    </el-form-item>
    <el-form-item label="描述：" prop="description">
      <el-input v-model="rulesForm.description" placeholder="请输入协议描述" :maxlength="32" clearable />
    </el-form-item>

    <el-form-item label="文件：" prop="file">
      <el-upload
        ref="uploadFile"
        :action="uploadDataUrl"
        :on-success="onUploadSuccess"
        :on-progress="onUploadProgress"
        :on-error="onUploadError"
        :on-remove="onUploadRemove"
        :before-upload="onBeforeUpload"
        name="files"
        multiple
        accept=".pdf"
        :file-list="uploadDataFileList">
        <el-button size="small" type="primary" plain icon="el-icon-upload">点击上传</el-button>
        <div slot="tip" class="el-upload__tip d-ib ml-10">只能上传.pdf格式文件</div>
      </el-upload>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="resetForm">重 置</el-button>
      <el-button type="primary" @click="submitForm">保 存</el-button>
    </el-form-item>
  </el-form>
</template>

 

2.数据

<script>
export default ({
  data() {
    return {
      // 文件上传服务地址
      uploadDataUrl: '',
      // 文件生产成功暂存列表
      uploadDataFileList: [],
      rulesForm: {
        name: '',
        description: '',
        // 表单校验时暂存 JSON.stringify([{path:'',name:'',id:''}])的字符串数据
        file: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入协议名称', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入协议描述', trigger: 'blur' }
        ],
        file: [
          { required: true, message: '请上传协议文档', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    /* 提交校验 */
    submitForm(formName) {
      this.$refs['rulesForm'].validate((valid) => {
        if (valid) {
          const { file } = this.rulesForm
          // 组装保存数据
          const params = {
            ...this.rulesForm,
            // 
            file: JSON.parse(file),
          }
          // 保存
          this.onSave(params)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 保存请求
    onSave(params) {
      // ...
    },
    /* 重置 */
    resetForm() {
      this.$refs['rulesForm'].resetFields()
      this.uploadDataFileList = []
    },

    // 上传中
    onUploadProgress(response, file, fileList) {
      this.uploading = this.$loading({
        lock: true,
        text: "上传中…",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },

    // 上传失败回调
    onUploadError(response, file, fileList) {
      const { name } = file
      this.uploading && this.uploading.close();
      this.$message({
        message: `${name}上传失败`,
        type: "error"
      });
    },

    // 上传成功回调
    onUploadSuccess(response, file, fileList) {
      this.uploading && this.uploading.close();
      const { name } = file
      this.upDataStringFile('file', fileList)
      this.$message({
        message: `${name}上传成功`,
        type: "success"
      });
    },

    // 上传格式做限制
    onBeforeUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension = testmsg === "pdf";
      if (!extension) {
        setTimeout(() => {
          this.$message({
            message: `文件"${file.name}"只能上传.pdf格式!`,
            type: "warning"
          });
        })
      }
      return extension;
    },

    // 上传flistList删除
    onUploadRemove(file, fileList) {
      this.upDataStringFile('file', fileList)
    },

    // 更新rulesForm 里的上传值
    upDataStringFile(name, list) {
      const arr = []
      list.forEach(item => {
        if (item.response) {
          arr.push({ path: item.response.filePath[0] })
        }
      })
      this.rulesForm[name] = JSON.stringify(arr)
    }
  }
})
</script>