element-ui upload组件多文件上传

之前有一篇写的如何同时传递form表单及upload组件文件，如果有多个upload文件该如何传递呢

上代码

html

1       <el-form ref="newform" :model="newform" :rules="rules">
2         <el-form-item prop="expName" label="">
3           <el-input v-model="newform.expName" placeholder="" style="width:75%">
4           </el-input>
5         </el-form-item>
6         <el-form-item prop="expSn" label="">
7           <el-input v-model="newform.expSn" placeholder="" style="width:75%">
8           </el-input>
9         </el-form-item>
10         <el-form-item label='' prop="groupName">
11           <el-select v-model="newform.groupName" placeholder="" style="width:75%" @change="newSelectGroup($event)">
12             <el-option
13             v-for="item in groupOptions"
14             :key="item.groupId"
15             :label="item.groupName"
16             :value="item.groupId">
17             </el-option>
18           </el-select>
19         </el-form-item>
20         <el-form-item  label="" prop="subGroupName">
21           <el-select v-model="newform.subGroupName" placeholder="" style="width:75%" @change="newSelectSubGroup($event)">
22             <el-option
23             v-for="item in subGroupOptions"
24             :key="item.subGroupId"
25             :label="item.subGroupName"
26             :value="item.subGroupId">
27             </el-option>
28           </el-select>
29         </el-form-item>
30         <el-form-item label="" prop="expvmDifficulty">
31           <el-rate v-model="newform.expvmDifficulty" :max="5" style="line-height: 2;"></el-rate>
32         </el-form-item>
33         <el-form-item label="" prop="expvmInstruction">
34           <el-upload
35             class="upload-demo"
36             drag
37             ref="uploadhtml"
38             :action="upload_url"
39             :auto-upload="false"
40             :before-upload="newHtml"
41             accept=".html, .htm">
42             <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
43             <div slot="tip" class="el-upload__tip">实验信息上传，只能传(.html/.htm)文件</div>
44           </el-upload>
45         </el-form-item>
46         <el-form-item label="" prop="expvmFiles">
47           <el-upload
48             class="upload-demo"
49             drag
50             ref="uploadfile"
51             :action="upload_url"
52             :auto-upload="false"
53             :before-upload="newFiles"
54             multiple>
55             <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
56             <div slot="tip" class="el-upload__tip">实验信息附件上传，只能传(.file)文件</div>
57           </el-upload>
58         </el-form-item>
59         <el-form-item label=""  prop="expvmVideo">
60           <el-upload
61             class="upload-demo"
62             drag
63             ref="uploadvideo"
64             :action="upload_url"
65             :auto-upload="false"
66             :before-upload="newVideo"
67             accept=".mp4">
68             <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
69             <div slot="tip" class="el-upload__tip">实验视频上传，只能传(.mp4)文件</div>
70           </el-upload>
71         </el-form-item>
72         <el-form-item style="text-align:center">
73          <el-button type="primary" @click="newSubmitForm()" class="yes-btn">
74           确 定
75          </el-button>
76          <el-button @click="resetForm('newform')">
77           重 置
78          </el-button>
79         </el-form-item>
80      </el-form>

js

1  data () {
2     return {
3 　　　 upload_url: 'aaa',       // 随便填一个，但一定要有
4 　　   uploadForm: new FormData(),   // 一个formdata
5       rules: {},     // 用到的规则
6       newform: {
7         expName: '',
8         groupName: '',
9         expSn: '',
10         subGroupName: '',
11         expvmDifficulty: 1
12       }
13     }
14   }

methods

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           
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             
16             }
17           })
18           this.$refs.uploadhtml.submit()   // 提交时触发了before-upload函数
19           this.$refs.uploadfile.submit()
20           this.$refs.uploadvideo.submit()
21
22         } else {
23           console.log('error submit!!')
24           return false
25         }
26       })
27     },
28     newHtml (file) {   // before-upload
29       this.uploadForm.append('html', file)
30       return false
31     },
32     newFiles (file) {
33       this.uploadForm.append('file[]', file)
34       return false
35     },
36     newVideo (file) {
37       this.uploadForm.append('video', file)
38       return false
39     }

newExp函数是作为一个前后端交互的函数

1 export function newExp (data) {
2   return axios({
3     method: 'post',  // 方式一定是post
4     url: '你的后台接收函数路径',
5     timeout: 20000,
6     data: data        // 参数需要是单一的formData形式
7   })
8 }

PHP代码，后台接收

1 public function newExp() {
2     $param = $this->request->post();          // 获取页面表单传值
3     $files = $this->request->file();          // 接收到的文件
4 }

注意

this.uploadForm.append('file[]', file)

这里是接收多文件一定要是数组形式的file[]