element-ui多文件上传的实现示例


Posted in Javascript onApril 10, 2019

上传方案一:

先将文件上传到七牛,再将七牛上传返回的文件访问路径上传到服务器

<div class="upload-music-container">
  <el-upload
   class="upload-music"
   ref="upload"
   action="http://up-z2.qiniup.com/"
   :data="{token:uploadToken}"
   multiple
   accept=".mp3"
   :before-upload="uploadBefore"
   :on-change="uploadChange"
   :on-success="uploadSuccess"
   :on-error="uploadError">
   <el-button size="small" type="primary">选取文件</el-button>
   <div slot="tip" class="el-upload__tip">仅支持上传mp3文件,文件大小不超过500M</div>
  </el-upload>
  <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>
</div>
 

export default {
  name: 'uploadMusic',
  data() {
   return {
    headers: {},
    uploadToken: null,
    canUploadMore: true,
    fileList: null,
   }
  },
  created() {
   this.headers = {}   //此处需要与server约定具体的header
   this.getUploadToken()
  },
  methods: {
   //获取上传七牛token凭证
   getUploadToken() {
    this.$http.get('xxxxxxx', {headers: this.headers}).then(response => {
     if (response.data.status == 200) {
      let resp = response.data.data
      this.uploadToken = resp.token
     } else {
      this.$message({
       message: '获取凭证失败,请重试',
       type: 'error'
      })
     }
    })
   },
   //获取音频文件时长
   getVideoPlayTime(file, fileList) {
    let self = this
    //获取录音时长
    try {
     let url = URL.createObjectURL(file.raw);
     //经测试,发现audio也可获取视频的时长
     let audioElement = new Audio(url);
     let duration;
     audioElement.addEventListener("loadedmetadata", function (_event) {
      duration = audioElement.duration;
      file.duration = duration
      self.fileList = fileList
     });
    } catch (e) {
     console.log(e)
    }
   },
   //校验上传文件大小
   uploadChange(file, fileList) {
    this.fileList = fileList
    let totalSize = 0
    for (let file of fileList) {
     totalSize += file.raw.size
    }
    if (totalSize > 500 * 1024 * 1024) {
     this.canUploadMore = false
     this.$message({
      message: '上传文件不能不超过500M',
      type: 'warn'
     })
    } else {
     this.canUploadMore = true
    }
   },
   uploadBefore(file) {
    if (this.canUploadMore) {
     return true
    }
    return false
   },
   //上传成功
   uploadSuccess(response, file, fileList) {
    this.getVideoPlayTime(file, fileList)
   },
   //上传失败
   uploadError(err, file, fileList) {
    console.log(err)
   },
   //上传服务器数据格式化
   getUploadMusicList() {
    let musicList = []
    for (let file of this.fileList) {
     if (file.response && file.response.key) {
      musicList.push({
       "play_time": file.duration, //播放时长
       "size": file.size/1024,   //文件大小 单位 kb
       "song_name": file.name,   //歌曲名
       "voice_url": "xxxx"     //上传七牛返回的访问路径
      })
     }
    }
    return musicList
   },
   //上传至服务器
   submitUpload() {
    let musicList = this.getUploadMusicList()
    this.$http.post('xxxxxxxxxx', {music_list: musicList}, {headers: this.headers}).then(response => {
     if (response.data.status == 200) {
      this.$refs.upload.clearFiles() //上传成功后清空文件列表
      this.$message({
       message: '上传服务器成功',
       type: 'success'
      })
     } else{
      this.$message({
       message: '上传服务器失败,请重试',
       type: 'error'
      })
     }
    }).catch(err => {
     this.$message({
      message: '上传服务器失败,请重试',
      type: 'error'
     })
    })
   },
  }
 }

上传方案二:

直接将文件上传到服务器

<div class="upload-music-container">
  <el-upload
   class="upload-music"
   ref="upload"
   multiple
   action=""
   :auto-upload="false"
   :http-request="uploadFile">
   <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
   <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
   <div slot="tip" class="el-upload__tip">只能上传mp3文件,且单次不超过500M</div>
  </el-upload>
</div>

export default {
  name: 'uploadMusic',
  data() {
   return {
    fileType:'video',
    fileData: new FormData(),
    headers:{},
   }
  },

补充:element-ui实现多文件加表单参数上传

element-ui是分图片多次上传,一次上传一个图片。

如果想一次上传多个图片,就得关掉自动上传:auto-upload=‘false',同时不使用element内置上传函数,换成自己写的onsubmit()

为了实现图片的添加删除,可在on-change与on-remove事件中取得filelist(filelist实质就是uploadFiles的别名,而uploadFiles就是element内置的用于保存待上传文件或图片的数组),在最后一步提交的过程中,将filelist中的值一一添加到formdata对象中(formdata.append()添加,formdata.delete()删除),然后统一上传。

ps:on-preview事件和<el-dialog>组件以及对应属性、方法这一体系是用来实现图片的点击放大功能。被注释掉的beforeupload只有一个实参,是针对单一文件上传时使用到的,这里无法用上

<template>
 <div>
  <el-upload
   action="http://127.0.0.1:8000/api/UploadFile/"
   list-type="picture-card"
   :auto-upload="false"
   :on-change="OnChange"
   :on-remove="OnRemove"
   :on-preview="handlePictureCardPreview"
   :before-remove="beforeRemove"
   >
   <i class="el-icon-plus"></i>
  </el-upload>
  <el-dialog :visible.sync="dialogVisible">
   <img width="100%" :src="dialogImageUrl" alt="">
  </el-dialog>
  <el-button type="" @click="fun">点击查看filelist</el-button>
  <el-button type="" @click="onSubmit">提交</el-button>
 </div>
</template>
 
<script>
import {host,batchTagInfo} from '../../api/api'
export default {
  data() {
   return {
    param: new FormData(),
    form:{},
    count:0,
    fileList:[],
    dialogVisible:false,
    dialogImageUrl:''
   };
  },
  methods: {
   handlePictureCardPreview(file) {
    this.dialogImageUrl = file.url;
    this.dialogVisible = true;
   },
   beforeRemove(file, fileList) {
    return this.$confirm(`确定移除 ${ file.name }?`);
   },
   OnChange(file,fileList){
    this.fileList=fileList
 
   },
   OnRemove(file,fileList){
    this.fileList=fileList
   },
   //阻止upload的自己上传,进行再操作
   // beforeupload(file) {
   //   console.log('-------------------------')
   //   console.log(file);
   //   //创建临时的路径来展示图片
   //   //重新写一个表单上传的方法
   //   this.param = new FormData();
   //   this.param.append('file[]', file, file.name);
   //   this.form={
   //    a:1,
   //    b:2,
   //    c:3
   //   }
   //   // this.param.append('file[]', file, file.name);
   //   this.param.append('form',form)
   //   return true;
   // },
   fun(){
    console.log('------------------------')
    console.log(this.fileList)
   },
   onSubmit(){
     this.form={
      a:1,
      b:2,
      c:3
     }
     let file=''
    for(let x in this.form){
 
     this.param.append(x,this.form[x])
    }
    for(let i=0;i<this.fileList.length;i++){
     file='file'+this.count
     this.count++
     this.param.append(file,this.fileList[i].raw)
    }
    batchTagInfo(this.param) 
     .then(res=>{
      alert(res)
     })
   }
  }
 }
</script>
<style> 
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的事件处理
Jan 16 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
JS检测图片大小的实例
Aug 21 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 Javascript
JS实现的仿QQ空间图片弹出效果代码
Feb 23 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
May 16 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
May 26 Javascript
Spring Boot/VUE中路由传递参数的实现代码
Mar 02 Javascript
简单了解JavaScript异步
May 23 Javascript
vue中监听路由参数的变化及方法
Dec 06 Javascript
es6函数中的作用域实例分析
Apr 18 Javascript
vue3中provide && inject的使用
Jul 01 Vue.js
基于mpvue搭建微信小程序项目框架的教程详解
Apr 10 #Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 #Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 #Javascript
用node撸一个监测复联4开售短信提醒的实现代码
Apr 10 #Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 #Javascript
详解vue.js移动端配置flexible.js及注意事项
Apr 10 #Javascript
小程序分享模块超级详解(推荐)
Apr 10 #Javascript
You might like
php+ajax导入大数据时产生的问题处理
2014/06/11 PHP
ThinkPHP分页实例
2014/10/15 PHP
PHP通过引用传递参数用法分析
2016/12/01 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
js获取图片长和宽度的代码
2009/11/24 Javascript
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
javascript数组操作总结和属性、方法介绍
2014/04/05 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
在JavaScript中使用对数Math.log()方法的教程
2015/06/15 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
2015/10/19 Javascript
写给小白的JavaScript引擎指南
2015/12/04 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
js实现购物车功能
2018/06/12 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
python实现随机密码字典生成器示例
2014/04/09 Python
python实现五子棋小游戏
2020/03/25 Python
set在python里的含义和用法
2019/06/24 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
Anaconda详细安装步骤图文教程
2020/11/12 Python
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
自我工作评价范文
2015/03/06 职场文书
通知的格式范文
2015/04/27 职场文书
毕业论文致谢范文
2015/05/14 职场文书
论文评审意见
2015/06/05 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书