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 相关文章推荐
利用JS判断用户是否上网(连接网络)
Dec 23 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
Oct 16 Javascript
jQuery与JS加载事件用法分析
Sep 04 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
Sep 14 Javascript
Bootstrap CSS布局之表格
Dec 17 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 Javascript
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
vue+eslint+vscode配置教程
Aug 09 Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 Javascript
基于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
cmd下运行php脚本
2008/11/25 PHP
php获取网页内容方法总结
2008/12/04 PHP
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
session 加入redis的实现代码
2016/07/15 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
限制文本框输入N个字符的js代码
2010/05/13 Javascript
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
javascript判断并获取注册表中可信任站点的方法
2015/06/01 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
python下读取公私钥做加解密实例详解
2017/03/29 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
python的concat等多种用法详解
2018/11/28 Python
python生成器与迭代器详解
2019/01/01 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
戴森西班牙官网:Dyson西班牙
2020/02/04 全球购物
药学专业个人的自我评价
2013/12/31 职场文书
魅力教师事迹材料
2014/01/10 职场文书
电脑销售顾问自荐信
2014/01/29 职场文书
期中考试反思800字
2014/05/01 职场文书
信访维稳承诺书
2015/05/04 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
培训心得体会怎么写
2016/01/25 职场文书
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python