antdv 多表单上传组件的使用

功能：点击新增按钮，可以添加一个表单，每个表单验证了名称必填，上传组件只能上传一个文件（图片或者pdf格式），点击确定实现文件的手动上传。

HTML

​
 <a-form :form="form">
      <div class="wrap">
        <a-icon type="plus-circle" @click="addRow" :style="{ color: '#1890ff' }"></a-icon>
      </div>
      <div v-for="(item,index) in formList" :key="'batch'+item" class="batch-wrap">
        <a-row>
          <a-col :span="23">
            <a-row>
              <a-col :span="10">
                <a-form-item label="名称" :labelCol="{span: 7}" :wrapperCol="{span: 17}">
                  <a-input
                    placeholder="请输入名称"
                    v-decorator="[`${BATCH}fileName[${item}]`,
                    {initialValue: arr[index] ? arr[index].fileName : '',
                    rules: [{ required: true, message: '请输入名称!' }]}]">
                  </a-input>
                </a-form-item>
              </a-col>
              <a-col :span="14" class="ml-20">
                <a-form-item label="">
                  <a-upload
                    :file-list="arr[index].fileList"
                    :remove="(file)=>handleRemoveBatch(file,index)"
                    :before-upload="(file, fileList)=>beforeUploadBatch(file, fileList, index)">
                    <a-button v-if="arr[index].fileList.length < 1"> <a-icon type="upload" /> 点击上传 </a-button>
                  </a-upload>
                </a-form-item>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="1" class="del">
            <a-icon v-if="formList.length > 1" type="close-circle" @click="removeRow(item)"/>
          </a-col>
        </a-row>
      </div>
    </a-form>
    <template slot="footer">
      <a-button @click="handleCancel">关闭</a-button>
      <a-button type="primary"  @click="submitForm">确定</a-button>
    </template>

方法

 const BATCH = 'batch'

 export default {
  name: 'BatchUploadForm',
  data() {
   return {
    visible: false,
    form: this.$form.createForm(this),
    model: {},
    confirmLoading: false,
    validatorRules: {},
    url: {
     add: "",
    },
    formList: [],
    fileIndex: 0,
    arr: [],
    BATCH,
   }
  },
  methods: {
   add() {
    this.edit({});
   },
   edit(record) {
    this.fileIndex = 0;
    this.form.resetFields();
    this.model = Object.assign({}, record);
    this.visible = true;
        this.formList = [];
        this.arr = [{fileName: '', fileList: [] }];
        this.arr.forEach((item,index)=>{
          this.fileIndex = 0;
          this.formList.push(index)
        })
   },
      // 删除文件
      handleRemoveBatch(file,index){
        const fileIndex = this.arr[index].fileList.indexOf(file);
        const newFileList = this.arr[index].fileList.slice();
        newFileList.splice(fileIndex, 1);
        this.arr[index].fileList = newFileList;
        console.log('handleRemoveBatch=', this.arr)
      },
      beforeUploadBatch(file, fileList, index) {
        if (file.type.indexOf('image') >= 0 || file.type.indexOf('pdf') >= 0) {
          this.arr[index].fileList = fileList;
          console.log('arr==', this.arr)
          return false;
        } else{
          this.$message.warning('请上传图片或pdf格式的文件！')
          return false
        }
      },
   // 新增一个图纸上传表单
   addRow() {
    this.fileIndex = this.fileIndex + 1;
    this.formList = this.formList.concat(this.fileIndex);
    this.arr.push({fileName: '', fileList: [] })
   },
   // 移除一个图纸上传表单
   removeRow(k) {
    if (this.formList.length === 1) {
     return
    }
    this.formList = this.formList.filter(item => item !== k)
    this.arr.splice(k,1)
   },
   submitForm() {
        if(this.arr.some(i=>i.fileList.length === 0)){
          return this.$message.warning('请上传文件！')
        }
        const {form: {validateFields}} = this;
    let that = this;
    validateFields((errors, values) => {
     if (!errors) {
      let fileArr = [];
      (values[`${BATCH}fileName`]).forEach((item, index) => {
       const obj = {
        fileName: values[`${BATCH}fileName`][index],
        fileList: this.arr[index].fileList[0], // 限制了只能上传一个文件
       }
       fileArr.push(obj)
      })
            let fileNames = fileArr.map(({fileName:i})=>i)
            that.confirmLoading = true;
            const formData = new FormData();
            formData.append('fileNames', fileNames.join(','));
            fileArr.forEach(item => {
              formData.append('files[]', item.fileList);
            });
      console.log('formData==',formData)
      httpAction(this.url.add,formData,'post').then((res)=>{
       if(res.success){
                that.visible = false;
        that.$message.success(res.message);
        that.$emit('ok');
       }else{
        that.$message.warning(res.message);
       }
      }).finally(() => {
       that.confirmLoading = false;
      })
     }
    })
   },
      handleCancel () {
        this.visible = false;
      }
  }
 }