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的相对父元素和相对文档定位示例代码
Aug 02 Javascript
比较新旧两个数组值得增加和删除的JS代码
Oct 30 Javascript
js的延迟执行问题分析
Jun 23 Javascript
js实现ArrayList功能附实例代码
Oct 29 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 Javascript
使用javaScript动态加载Js文件和Css文件
Oct 24 Javascript
谈谈JavaScript的New关键字
Aug 26 Javascript
Vue.js计算属性computed与watch(5)
Dec 09 Javascript
canvas绘制的直线动画
Jan 23 Javascript
Javascript实现页面滚动时导航智能定位
May 06 Javascript
微信小程序授权登录及解密unionId出错的方法
Sep 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
要会喝咖啡也要会知道咖啡豆
2021/03/03 咖啡文化
PHP产生随机字符串函数
2006/12/06 PHP
PHP网站基础优化方法小结
2008/09/29 PHP
浅析php学习的路线图
2013/07/10 PHP
PHP比你想象的好得多
2014/11/27 PHP
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
php实现学生管理系统
2020/03/21 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
Yii2学习笔记之汉化yii设置表单的描述(属性标签attributeLabels)
2017/02/07 PHP
javascript vvorld 在线加密破解方法
2008/11/13 Javascript
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
js对象与打印对象分析比较
2013/04/23 Javascript
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
2016/02/23 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
opencv python 傅里叶变换的使用
2018/07/21 Python
Python 控制终端输出文字的实例
2019/07/12 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
DTD的含义以及作用
2014/01/26 面试题
大学应届生的自我评价
2014/03/06 职场文书
师范生见习报告
2014/10/31 职场文书
护士长2014年终工作总结
2014/11/11 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
2016廉洁教育心得体会
2016/01/20 职场文书