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


Posted in Javascript onOctober 17, 2018

之前有一篇写的如何同时传递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[]

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

Javascript 相关文章推荐
checkbox勾选判断代码分析
Jun 11 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 Javascript
AngularJS过滤器filter用法分析
Dec 11 Javascript
jQuery源码分析之init的详细介绍
Feb 13 Javascript
Angular.js跨controller实现参数传递的两种方法
Feb 20 Javascript
详解Angular 自定义结构指令
Jun 21 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
JavaScrip关于创建常量的知识点
Dec 07 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 Javascript
Vue.js实现可编辑的表格
Dec 11 Javascript
js 计数排序的实现示例(升级版)
Jan 12 Javascript
bootstrap table合并行数据并居中对齐效果
Oct 17 #Javascript
IE9 elementUI文件上传的问题解决
Oct 17 #Javascript
vue src动态加载请求获取图片的方法
Oct 17 #Javascript
node实现分片下载的示例代码
Oct 17 #Javascript
在小程序开发中使用npm的方法
Oct 17 #Javascript
浅谈HTTP 缓存的那些事儿
Oct 17 #Javascript
使用angular-cli webpack创建多个包的方法
Oct 16 #Javascript
You might like
php基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
php ajax 静态分页过程形式
2011/09/02 PHP
PHP中usort在值相同时改变原始位置问题的解决方法
2011/11/27 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
jQuery控制TR显示隐藏的三种常用方法
2014/08/21 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
2015/08/24 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
javascript日期格式化方法汇总
2015/10/04 Javascript
详解支持Angular 2的表格控件
2017/01/19 Javascript
Vue精简版风格概述
2018/01/30 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
python获取代码运行时间的实例代码
2018/06/11 Python
python__name__原理及用法详解
2019/11/02 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
matplotlib jupyter notebook 图像可视化 plt show操作
2020/04/24 Python
浅谈Python3中print函数的换行
2020/08/05 Python
Python操控mysql批量插入数据的实现方法
2020/10/27 Python
html5 迷宫游戏(碰撞检测)实例一
2013/07/25 HTML / CSS
StringBuilder和String的区别
2015/05/18 面试题
php优化查询foreach代码实例讲解
2021/03/24 PHP
《美丽的黄昏》教学反思
2014/02/28 职场文书
现场施工员岗位职责
2014/03/10 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书
小学三年级作文之写景
2019/11/05 职场文书
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫