动态表单上传文件

之前做了一个动态表单的页面，最近要在这个动态表单中增加一个文件上传的操作，如何在上传操作中传参呢？

页面代码

<div v-for="(item,index) in form.list" :key="index">
<el-form-item
    label="上传证书"
    label-width="250px"
    :key="'path'+index"
    :prop="'list.'+index+'.path'"
    :rules="{
        required: true,
        message: '请上传',
        trigger: 'change'
    }">
    <el-input v-model="item.path" readonly></el-input>
    <el-upload
        :ref="'upload'+index"
        action="#"
        accept=".zip,.pfx"
        :file-list="fileList"
        :http-request="(params)=>httpRequest(params,index)"
        :auto-upload="false"
        :show-file-list="false"
        :on-change="(file,fileList)=>onChange(file,fileList,index)">
    <el-button
        slot="trigger"
        size="small"
        style="height:36px"
     >浏览...</el-button>
    
    <el-button
        size="small"
        type="primary"
        style="height:36px;
               margin-left:4px;
               position:absolute"
     >上传</el-button>
</el-form-item>
</div>

上传方法

submitUpload(index){
    this.$refs['upload'+index][0].submit();
},

httpRequest(params,index){
    upload({file:params.file}).then((res)=>{ //调用上传文件接口
        this.$message.success("上传成功")
        this.form.list[index].path = res.data;
    }).catch(()=>{
        this.$message.success("上传接口报错")
    })
},
//预览选中文件之后将文件名赋值给输入框之后点击上传按钮调用submit()方法上传文件
onChange(file,fileList,index){
    this.form.list[index].path = file.name;
}
    

提示：上文代码中也可见动态表单如何设置校验方法，可在prop参数中赋值index：for循环的list数组+index+输入框参数，并且要设置key来作为唯一标识，可用输入框参数+index表示