之前有一篇写的如何同时传递表形式单及上传组件文件,如果有多个上传文件该如何传递呢
上代码
html
& lt; el-form ref=皀ewform中将”:模型=皀ewform中将”:规则=肮嬖颉北?
& lt; el-form-item道具=癳xpName”标签=薄氨?
& lt; el-input v模型=" newform中将。expName”占位符=" "比;
& lt;/el-input>
& lt;/el-form-item>
& lt; el-form-item道具=癳xpSn”标签=薄氨?
& lt; el-input v模型=" newform中将。expSn”占位符=" "比;
& lt;/el-input>
& lt;/el-form-item>
& lt; el-form-item标签=暗谰?癵roupName”比;
& lt; el-select v模型=" newform中将。groupName”占位符=" " @change=" newSelectGroup(事件)美元”在
& lt; el-option
v代表=癵roupOptions项目”
:关键=" item.groupId "
:label=" item.groupName "
:value=" https://www.yisu.com/zixun/item.groupId "比;
& lt;/el-option>
& lt;/el-select>
& lt;/el-form-item>
& lt; el-form-item label="道具=皊ubGroupName”比;
& lt; el-select v模型=" newform中将。subGroupName "占位符=" " @change=" newSelectSubGroup(事件)美元”在
& lt; el-option
v代表=皊ubGroupOptions项目”
:关键=" item.subGroupId "
:label=" item.subGroupName "
:value=" https://www.yisu.com/zixun/item.subGroupId "比;
& lt;/el-option>
& lt;/el-select>
& lt;/el-form-item>
& lt; el-form-item label="道具=癳xpvmDifficulty”比;
& lt; el-rate v模型=" newform中将。expvmDifficulty”: max=" 5 "祝辞& lt;/el-rate>
& lt;/el-form-item>
& lt; el-form-item label="道具=癳xpvmInstruction”比;
& lt; el-upload
类=" upload-demo "
拖
ref=" uploadhtml "
:action=皍pload_url”
: auto-upload=" false "
:before-upload=" newHtml”
接受="。在html . htm”;
& lt; div类=" el-upload__text "祝辞将文件拖到此处,或& lt; em>点击上传& lt;/em> & lt;/div>
& lt; div槽=靶》选眂lass=癳l-upload__tip”祝辞实验信息上传,只能传(. html/. htm)文件& lt;/div>
& lt;/el-upload>
& lt;/el-form-item>
& lt; el-form-item label="道具=癳xpvmFiles”比;
& lt; el-upload
类=" upload-demo "
拖
ref="还是"
:action=皍pload_url”
: auto-upload=" false "
:before-upload=" newfile中”
multiple>
& lt; div类=" el-upload__text "祝辞将文件拖到此处,或& lt; em>点击上传& lt;/em> & lt;/div>
& lt; div槽=靶》选眂lass=癳l-upload__tip”祝辞实验信息附件上传,只能传(.file)文件& lt;/div>
& lt;/el-upload>
& lt;/el-form-item>
& lt; el-form-item label="道具=癳xpvmVideo”比;
& lt; el-upload
类=" upload-demo "
拖
ref=" uploadvideo "
:action=皍pload_url”
: auto-upload=" false "
:before-upload=" newVideo”
接受=癿p4”比;
& lt; div类=" el-upload__text "祝辞将文件拖到此处,或& lt; em>点击上传& lt;/em> & lt;/div>
& lt; div槽=靶》选眂lass=癳l-upload__tip”祝辞实验视频上传,只能传(mp4)文件& lt;/div>
& lt;/el-upload>
& lt;/el-form-item>
& lt; el-form-item比;
& lt; el-button类型=爸鳌盄click=皀ewSubmitForm ()”class=皔es-btn”比;
确定
& lt;/el-button>
& lt; el-button @click=" resetForm (newform中将)“比;
重置
& lt;/el-button>
& lt;/el-form-item>
& lt;/el-form>
之前
js
数据(){
返回{
upload_url: ' aaa ',//随便填一个,但一定要有
uploadForm:新FormData()//一个FormData
规则:{},//用到的规则
newform中将:{
expName:”,
groupName:”,
expSn:”,
subGroupName:”,
expvmDifficulty: 1
}
}
}
之前
的方法
newSubmitForm () {
美元。参考文献[newform中将的]. validate((有效)=比;{
如果(有效){
this.uploadForm。追加(expName, this.newform.expName)
this.uploadForm。追加(expSn, this.newform.expSn)
this.uploadForm。追加(groupId, this.newgroupId)
this.uploadForm。追加(subGroupId, this.newsubgroupId)
this.uploadForm。追加(expvmDifficulty, this.newform.expvmDifficulty)
newExp (this.uploadForm)。然后(res=比;{
如果(res.code===400) {
美元。message.error (res.error)
}else if (res.code===200) {
message.success美元。(“上传成功!”)
}
})
这个。$ refs.uploadhtml.submit()//提交时触发了before-upload函数
refs.uploadfile.submit美元。()
refs.uploadvideo.submit美元。()
其他}{
控制台。日志(错误提交! !)
返回假
}
})
},
{//before-upload newHtml(文件)
this.uploadForm。追加(“html”,文件)
返回假
},
newfile中(文件){
this.uploadForm。追加(“文件[]”,文件)
返回假
},
newVideo(文件){
this.uploadForm。追加(“视频”,文件)
返回假
}
newExp函数是作为一个前后端交互的函数
导出功能newExp(数据){
返回axios ({
方法:“文章”,//方式一定是职位
url:“你的后台接收函数路径”,
超时:20000,//数据:数据参数需要是单一的formData形式
})
}
