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转换农历类实现及调用方法
Jan 27 Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
jstree单选功能的实现方法
Jun 07 Javascript
bootstrap multiselect下拉列表功能
Aug 22 Javascript
vue elementUI tree树形控件获取父节点ID的实例
Sep 12 Javascript
在vue 中使用 less的教程详解
Sep 26 Javascript
webpack4实现不同的导出类型
Apr 09 Javascript
基于Fixed定位的框选功能的实现代码
May 13 Javascript
javascript实现前端input密码输入强度验证
Jun 24 Javascript
Element Input输入框的使用方法
Jul 26 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完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
详解WordPress开发中过滤属性以及Sql语句的函数使用
2015/12/25 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
2010/11/16 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
json原理分析及实例介绍
2012/11/29 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
display和visibility的区别示例介绍
2014/02/26 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
学习使用Bootstrap栅格系统
2017/05/11 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
详解Angular如何正确的操作DOM
2018/07/06 Javascript
用js简单提供增删改查接口
2019/05/12 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
Javascript Dom元素获取和添加详解
2019/09/24 Javascript
Vue实现购物车基本功能
2020/11/08 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
Python实现冒泡排序的简单应用示例
2017/12/11 Python
python实现猜单词小游戏
2020/05/22 Python
TensorFlow dataset.shuffle、batch、repeat的使用详解
2020/01/21 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
深入浅析Python代码规范性检测
2020/07/31 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
酒店办公室文员岗位职责
2013/12/18 职场文书
金融行业职业生涯规划范文
2014/01/17 职场文书
孝老爱亲模范事迹材料
2014/05/25 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
初中班主任心得体会
2016/01/07 职场文书
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL