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>