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 设计模式 安全沙箱模式
Sep 24 Javascript
jQuery Ajax使用 全解析
Dec 15 Javascript
JavaScript中的16进制字符(改进)
Nov 21 Javascript
Javascript中 关于prototype属性实现继承的原理图
Apr 16 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
JavaScript类的继承操作实例总结
Dec 20 Javascript
JS函数式编程实现XDM一
Jun 16 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实现批量查询清除一句话后门的代码
2008/01/20 PHP
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
PHP基于phpqrcode生成带LOGO图像的二维码实例
2015/07/10 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
javascript function、指针及内置对象
2009/02/19 Javascript
Javascript 面向对象 重载
2010/05/13 Javascript
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
基于JQuery实现的类似购物商城的购物车
2011/12/06 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
jQuery在header中设置请求信息的方法
2017/03/06 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
javascript中神奇的 Date对象小结
2017/10/12 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
浅析JS中NEW的实现原理及重写
2020/02/20 Javascript
[04:21]狐狸妈带你到现场 DOTA2 TI中国区预选赛线下赛路线指引
2014/05/22 DOTA
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python获取图片颜色信息的方法
2015/03/18 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
Python中的引用和拷贝实例解析
2019/11/14 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
为什么group by 和order by会使查询变慢
2014/05/16 面试题
创新社会管理心得体会
2014/09/12 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
2014年语文教学工作总结
2014/12/17 职场文书
2015年统战工作总结
2015/05/19 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python
nginx 添加http_stub_status_module模块
2022/05/25 Servers