element-ui upload组件多文件上传

 1 ????????<el-form-item label="实验信息" prop="expvmInstruction"> 2 ??????????<el-upload 3 ????????????class="upload-demo" 4 ????????????drag 5 ????????????ref="uploadhtml" 6 ????????????:action="upload_url" 7 ????????????:auto-upload="false" 8 ????????????:before-upload="newHtml" 9 ????????????accept=".html, .htm">10 ????????????<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>11 ????????????<div slot="tip" class="el-upload__tip">实验信息上传，只能传(.html/.htm)文件</div>12 ??????????</el-upload>13 ????????</el-form-item>14 ????????<el-form-item label="附件信息" prop="expvmFiles">15 ??????????<el-upload16 ????????????class="upload-demo"17 ????????????drag18 ????????????ref="uploadfile"19 ????????????:action="upload_url"20 ????????????:auto-upload="false"21 ????????????:before-upload="newFiles"22 ????????????multiple>23 ????????????<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>24 ????????????<div slot="tip" class="el-upload__tip">实验信息附件上传，只能传(.file)文件</div>25 ??????????</el-upload>26 ????????</el-form-item>27 ????????<el-form-item label="实验视频" ?prop="expvmVideo">28 ??????????<el-upload29 ????????????class="upload-demo"30 ????????????drag31 ????????????ref="uploadvideo"32 ????????????:action="upload_url"33 ????????????:auto-upload="false"34 ????????????:before-upload="newVideo"35 ????????????accept=".mp4">36 ????????????<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>37 ????????????<div slot="tip" class="el-upload__tip">实验视频上传，只能传(.mp4)文件</div>38 ??????????</el-upload>39 ????????</el-form-item>

 1 newSubmitForm () { 2 ??????this.$refs[‘newform‘].validate((valid) => { 3 ????????if (valid) { 4 ??????????this.uploadForm.append(‘expName‘, this.newform.expName) 5 ??????????this.uploadForm.append(‘expSn‘, this.newform.expSn) 6 ??????????this.uploadForm.append(‘groupId‘, this.newgroupId) 7 ??????????this.uploadForm.append(‘subGroupId‘, this.newsubgroupId) 8 ??????????this.uploadForm.append(‘expvmDifficulty‘, this.newform.expvmDifficulty) 9 ??????????this.uploadForm.append(‘type‘, ‘0‘)10 ??????????newExp(this.uploadForm).then(res => {11 ????????????if (res.code === 400) {12 ??????????????this.$message.error(res.error)13 ????????????} else if (res.code === 200) {14 ??????????????this.$message.success(‘上传成功！‘)15 ??????????????this.showTableData()16 ????????????}17 ??????????})18 ??????????this.$refs.uploadhtml.submit()19 ??????????this.$refs.uploadfile.submit()20 ??????????this.$refs.uploadvideo.submit()21 ??????????this.newFormVisible = false22 ????????} else {23 ??????????console.log(‘error submit!!‘)24 ??????????return false25 ????????}26 ??????})27 ????},28 ????newHtml (file) {29 ??????this.uploadForm.append(‘html‘, file)30 ??????return false31 ????},32 ????newFiles (file) {33 ??????this.uploadForm.append(‘file[]‘, file)34 ??????return false35 ????},36 ????newVideo (file) {37 ??????this.uploadForm.append(‘video‘, file)38 ??????return false39 ????}