vue-cli3.0+element-ui上传组件el-upload的使用

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue-cli3.0+element-ui上传组件el-upload的使用，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4668字，纯文字阅读大概需要7分钟。

内容图文

最近项目中涉及很多文件上传的地方，然后文件上传又有很多限制。比如文件大小限制，文件个数限制，文件类型限制，文件上传后的列表样式自定义，包括上传进度条等问题。下面是我对element-ui的上传组件的一些改造， 点击查看源码。

我是自己维护了一个列表数据，再对这个列表数据进行一些操作，没用组件自带的。先看看我的组件模版

<template>
 <el-upload
  class="upload-demo"
  :limit="limit"
  :action="action"
  :accept="accept"
  :data="data"
  :multiple="multiple"
  :show-file-list="showFileList"
  :on-exceed="handleExceed"
  :with-credentials="withcredentials"
  :before-upload="handleBeforeUpload"
  :on-progress="handleProgress"
  :on-success="handleSuccess"
  :on-error="handleError">
  <el-button size="small" type="primary">上传</el-button>
 </el-upload>
</template>

limit: 限制文件个数
action：文件的上传地址（这里我没有特别封装axios，直接用默认的）
accept：接受上传的文件类型（字符串）
data：上传时附带的额外参数
multiple：多选（布尔类型，我这里设为true，即可以批量上传）
show-file-list：是否显示文件上传列表
with-credentials：是否携带cookie，布尔类型，true表示携带

这是我设置的一些初始值

下面最重要的就是钩子函数了

1、handleExceed是文件超出个数限制时的钩子

private handleExceed(files: any, fileList: any) {
  if (fileList.length > 20) {
   this.$message.error('最多允许上传20个文件');
   return false;
  }
 }

2、handleBeforeUpload文件上传前的钩子，可以做一些拦截，return false,则停止上传

private handleBeforeUpload(file: any) {
  // 文件大小限制
  const isLt5M = file.size / 1024 / 1024 < 5;
  if (!isLt5M) {
   this.$message.error('不得超过5M');
   return isLt5M;
  }
  // 文件类型限制
  const name = file.name ? file.name : '';
  const ext = name
   ? name.substr(name.lastIndexOf('.') + 1, name.length)
   : true;
  const isExt = this.accept.indexOf(ext) < 0;
  if (isExt) {
   this.$message.error('请上传正确的格式类型');
   return !isExt;
  }
  // 大小和类型验证都通过后，给自定义的列表中添加需要的数据
  this.objAddItem(this.tempArr, file);
 }

3、handleProgress文件上传时的钩子，更新进度条的值

private handleProgress(event: any, file: any, fileList: any) {
  this.tempArr.forEach((element: any, index: number) => {
   if (element.uid === file.uid) {
    // 更新这个uid下的进度
    const progress = Math.floor(event.percent);
    // 防止上传完接口还没有返回成功值，所以此处给定progress的最大值为99，成功的钩子中再置为100
    element.progress = progress === 100 ? 99 : progress;
    this.$set(this.tempArr, index, element);
    this.$emit('changeFileList', this.tempArr);
   }
  });
 }

4、handleSuccess文件上传成功时的钩子

private handleSuccess(response: any, file: any, fileList: any) {
  this.tempArr.forEach((element: any, index: number) => {
   if (element.uid === file.uid) {
    element.progress = 100;
    // element.url为下载地址，一般后端人员会给你返回
    // 我这边为了做后面的下载，先写死链接供测试
    element.url = 'http://originoo-1.b0.upaiyun.com/freepic/3226433.jpg!freethumb';
    this.$message.success('文件上传成功');
    this.$set(this.tempArr, index, element);
    this.$emit('changeFileList', this.tempArr);
   }
  });
  // response是后端接口返回的数据，可以根据接口返回的数据做一些操作
  // 示例
  // const bizCode = response.rspResult.bizCode;
  // switch (bizCode) {
  //  case 200:
  //   this.tempArr.forEach((element: any, index: number) => {
  //    if (element.uid === file.uid) {
  //     element.progress = 100;
  //     element.url = response.data.url; // 这是后端人员给我返回的下载地址
  //     this.$message.success('文件上传成功');
  //     this.$set(this.tempArr, index, element);
  //     this.$emit('changeFileList', this.tempArr);
  //    }
  //   });
  //   break;
  //  default:
  //   this.tempArr.forEach((element: any, index: number) => {
  //    if (element.uid === file.uid) {
  //     this.tempArr.splice(index, 1); // 上传失败删除该记录
  //     this.$message.error('文件上传失败');
  //     this.$emit('changeFileList', this.tempArr);
  //    }
  //   });
  //   break;
  // }
 }

5、handleError文件上传失败时的钩子

private handleError(err: any, file: any, fileList: any) {
  this.tempArr.forEach((element: any, index: number) => {
   if (element.uid === file.uid) {
    this.tempArr.splice(index, 1); // 上传失败删除该记录
    this.$message.error('文件上传失败');
    this.$emit('changeFileList', this.tempArr);
   }
  });
 }

添加数据函数

private objAddItem(tempArr: any[], file: any) {
  const tempObj = {
   uid: file.uid, // uid用于辨别文件
   originalName: file.name, // 列表显示的文件名
   progress: 0, // 进度条
   code: 200, // 上传状态
  };
  tempArr.push(tempObj);
  this.$emit('changeFileList', tempArr);
 }

上传的文件下载封装

private downloadFileFun(url: any) {
  const iframe: any = document.createElement('iframe') as HTMLIFrameElement;
  iframe.style.display = 'none'; // 防止影响页面
  iframe.style.height = 0; // 防止影响页面
  iframe.src = url;
  document.body.appendChild(iframe); // 这一行必须，iframe挂在到dom树上才会发请求
  // 5分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）
  setTimeout(() => {
   iframe.remove();
  }, 5 * 60 * 1000);
 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的vue-cli3.0+element-ui上传组件el-upload的使用全部内容，希望文章能够帮你解决vue-cli3.0+element-ui上传组件el-upload的使用所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---