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 相关文章推荐
jquery+php实现搜索框自动提示
Nov 28 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
Js 获取当前函数参数对象的实现代码
Jun 20 Javascript
bootstrap table实例详解
Jan 06 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
Mar 07 Javascript
Jquery把获取到的input值转换成json
May 15 jQuery
老生常谈javascript的面向对象思想
Aug 22 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 Javascript
vue项目出现页面空白的解决方案
Oct 31 Javascript
微信小程序定义和调用全局变量globalData的实现
Nov 01 Javascript
原生js实现随机点名
Jul 05 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
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
php 中include()与require()的对比
2006/10/09 PHP
使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT
2011/04/23 PHP
php函数指定默认值方法的小例子
2013/12/04 PHP
在PHP模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
2009/02/14 Javascript
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
15 个 JavaScript Web UI 库
2010/05/19 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
js回调函数仿360开机
2019/12/26 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
Python脚本处理空格的方法
2016/08/08 Python
python生成ppt的方法
2018/06/07 Python
python每天定时运行某程序代码
2019/08/16 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
详解Django关于StreamingHttpResponse与FileResponse文件下载的最优方法
2021/01/07 Python
迪拜航空官方网站:flydubai
2017/04/20 全球购物
Probikekit欧盟:在线公路自行车专家
2019/07/12 全球购物
HOTEL INFO英国:搜索全球酒店
2019/08/08 全球购物
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
搭讪开场白台词大全
2015/05/28 职场文书
《小小的船》教学反思
2016/02/18 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers
html5表单的required属性使用
2021/07/07 HTML / CSS
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL