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 相关文章推荐
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
基于Jquery制作的幻灯片图集效果打包下载
Feb 12 Javascript
JQuery对checkbox操作 (循环获取)
May 20 Javascript
JavaScript动态修改背景颜色的方法
Apr 16 Javascript
js实现图片点击左右轮播
Jul 08 Javascript
JavaScript常用基础知识强化学习
Dec 09 Javascript
详细探究ES6之Proxy代理
Jul 22 Javascript
jquery心形点赞关注效果的简单实现
Nov 14 Javascript
ES6之模版字符串的具体使用
May 17 Javascript
Vue表情输入组件 微信face表情组件
Feb 11 Javascript
详解webpack 最简打包结果分析
Feb 20 Javascript
Nuxt.js 静态资源和打包的操作
Nov 06 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
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
PHP addcslashes()函数讲解
2019/02/03 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
jquery键盘事件使用介绍
2011/11/01 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
JavaScript中读取和保存文件实例
2014/05/08 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
深入理解逻辑表达式的用法 与或非的用法
2016/06/06 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
Django中对数据查询结果进行排序的方法
2015/07/17 Python
对Python中type打开文件的方式介绍
2018/04/28 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
PyCharm使用之配置SSH Interpreter的方法步骤
2019/12/26 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
董事长助理岗位职责
2014/02/18 职场文书
创建市级文明单位实施方案
2014/03/01 职场文书
给孩子的新年寄语
2014/04/08 职场文书
政治表现评语
2014/05/04 职场文书
营销与策划专业求职信
2014/06/20 职场文书
运动会1000米加油稿
2015/07/21 职场文书
学生安全责任协议书
2016/03/22 职场文书
2019辞职报告范本3篇!
2019/07/23 职场文书
html form表单基础入门案例讲解
2021/07/21 HTML / CSS
VUE递归树形实现多级列表
2022/07/15 Vue.js