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 相关文章推荐
JavaScript也谈内存优化
Jun 06 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
Jun 06 Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 Javascript
jquery ajax双击div可直接修改div中的内容
Mar 04 Javascript
Easyui 之 Treegrid 笔记
Apr 29 Javascript
详解百度百科目录导航树小插件
Jan 08 Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
详解node.js中的npm和webpack配置方法
Jan 21 Javascript
vue 父组件调用子组件方法及事件
Mar 29 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
vue  elementUI 表单嵌套验证的实例代码
Nov 06 Javascript
如何将Node.js中的回调转换为Promise
Nov 10 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经典的给图片加水印程序
2006/12/06 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
php json_encode值中大括号与花括号区别
2013/09/30 PHP
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
php可变长参数处理函数详解
2017/02/22 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
Vue.js对象转换实例
2017/06/07 Javascript
浅谈关于axios和session的一些事
2017/07/13 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
2019/09/20 Javascript
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
js实现金山打字通小游戏
2020/07/24 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
Python操作MySQL数据库的方法
2018/06/20 Python
Python3.4学习笔记之列表、数组操作示例
2019/03/01 Python
python中class的定义及使用教程
2019/09/18 Python
Python设计密码强度校验程序
2020/07/30 Python
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
学生爱国演讲稿
2014/01/14 职场文书
2014年清明节寄语
2014/04/03 职场文书
《画杨桃》教学反思
2014/04/13 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
颐和园导游词
2015/01/30 职场文书
中考学习决心书
2015/02/04 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
迁徙的鸟观后感
2015/06/09 职场文书