欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

element-ui upload组件多文件上传的示例代码

程序员文章站 2022-06-03 12:37:46
之前有一篇写的如何同时传递form表单及upload组件文件,如果有多个upload文件该如何传递呢 上代码 html

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

上代码

html

<el-form ref="newform" :model="newform" :rules="rules">
    <el-form-item prop="expname" label="">
     <el-input v-model="newform.expname" placeholder="" style="width:75%">
     </el-input>
    </el-form-item>
    <el-form-item prop="expsn" label="">
     <el-input v-model="newform.expsn" placeholder="" style="width:75%">
     </el-input>
    </el-form-item>
    <el-form-item label='' prop="groupname">
     <el-select v-model="newform.groupname" placeholder="" style="width:75%" @change="newselectgroup($event)">
      <el-option
      v-for="item in groupoptions"
      :key="item.groupid"
      :label="item.groupname"
      :value="item.groupid">
      </el-option>
     </el-select>
    </el-form-item>
    <el-form-item label="" prop="subgroupname">
     <el-select v-model="newform.subgroupname" placeholder="" style="width:75%" @change="newselectsubgroup($event)">
      <el-option
      v-for="item in subgroupoptions"
      :key="item.subgroupid"
      :label="item.subgroupname"
      :value="item.subgroupid">
      </el-option>
     </el-select>
    </el-form-item>
    <el-form-item label="" prop="expvmdifficulty">
     <el-rate v-model="newform.expvmdifficulty" :max="5" style="line-height: 2;"></el-rate>
    </el-form-item>
    <el-form-item label="" prop="expvminstruction">
     <el-upload
      class="upload-demo"
      drag
      ref="uploadhtml"
      :action="upload_url"
      :auto-upload="false"
      :before-upload="newhtml"
      accept=".html, .htm">
      <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
      <div slot="tip" class="el-upload__tip">实验信息上传,只能传(.html/.htm)文件</div>
     </el-upload>
    </el-form-item>
    <el-form-item label="" prop="expvmfiles">
     <el-upload
      class="upload-demo"
      drag
      ref="uploadfile"
      :action="upload_url"
      :auto-upload="false"
      :before-upload="newfiles"
      multiple>
      <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
      <div slot="tip" class="el-upload__tip">实验信息附件上传,只能传(.file)文件</div>
     </el-upload>
    </el-form-item>
    <el-form-item label="" prop="expvmvideo">
     <el-upload
      class="upload-demo"
      drag
      ref="uploadvideo"
      :action="upload_url"
      :auto-upload="false"
      :before-upload="newvideo"
      accept=".mp4">
      <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
      <div slot="tip" class="el-upload__tip">实验视频上传,只能传(.mp4)文件</div>
     </el-upload>
    </el-form-item>
    <el-form-item style="text-align:center">
     <el-button type="primary" @click="newsubmitform()" class="yes-btn">
     确 定
     </el-button>
     <el-button @click="resetform('newform')">
     重 置
     </el-button>
    </el-form-item>
   </el-form>

js

data () {
  return {
    upload_url: 'aaa',    // 随便填一个,但一定要有
    uploadform: new formdata(),  // 一个formdata
   rules: {},   // 用到的规则
   newform: {
    expname: '',
    groupname: '',
    expsn: '',
    subgroupname: '',
    expvmdifficulty: 1
   }
  }
 }

methods

newsubmitform () {
   this.$refs['newform'].validate((valid) => {
    if (valid) {
     this.uploadform.append('expname', this.newform.expname)
     this.uploadform.append('expsn', this.newform.expsn)
     this.uploadform.append('groupid', this.newgroupid)
     this.uploadform.append('subgroupid', this.newsubgroupid)
     this.uploadform.append('expvmdifficulty', this.newform.expvmdifficulty)
     
     newexp(this.uploadform).then(res => {
      if (res.code === 400) {
       this.$message.error(res.error)
      } else if (res.code === 200) {
       this.$message.success('上传成功!')
      
      }
     })
     this.$refs.uploadhtml.submit()  // 提交时触发了before-upload函数
     this.$refs.uploadfile.submit()
     this.$refs.uploadvideo.submit()
     
    } else {
     console.log('error submit!!')
     return false
    }
   })
  },
  newhtml (file) {  // before-upload
   this.uploadform.append('html', file)
   return false
  },
  newfiles (file) {
   this.uploadform.append('file[]', file)
   return false
  },
  newvideo (file) {
   this.uploadform.append('video', file)
   return false
  }
newexp函数是作为一个前后端交互的函数
export function newexp (data) {
 return axios({
  method: 'post', // 方式一定是post
  url: '你的后台接收函数路径',
  timeout: 20000,
  data: data    // 参数需要是单一的formdata形式
 })
}

php代码,后台接收

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

注意

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。