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 相关文章推荐
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
Feb 11 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 Javascript
解决vue路由后界面没有变化,但是链接有的问题
Sep 01 Javascript
angular6的响应式表单的实现
Oct 10 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 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函数解决SQL injection
2006/12/09 PHP
由php的call_user_func传reference引发的思考
2010/07/23 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
JavaScript 创建对象
2009/07/17 Javascript
js控制div及网页相关属性的代码
2009/12/19 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
js将json格式的对象拼接成复杂的url参数方法
2016/05/25 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
Vue实现的父组件向子组件传值功能示例
2019/01/19 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
三个python爬虫项目实例代码
2019/12/28 Python
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
美国背景检查、公共记录和人物搜索网站:BeenVerified
2018/02/25 全球购物
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
优秀实习生感言
2014/03/01 职场文书
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
小学生感恩父母演讲稿
2014/08/28 职场文书
2015年校长新年寄语
2014/12/08 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
财务人员个人工作总结
2015/02/27 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
基于JavaScript实现年月日三级联动
2021/06/22 Javascript
python程序的组织结构详解
2021/12/06 Python
python使用BeautifulSoup 解析HTML
2022/04/24 Python