Vue-el单个上传文件，带进度条！

Vue-el单个上传文件，带进度条！

首先是对html 的封装，正常扒官方文档就ok了，应该都能看懂

<div class="upload-file">
<el-upload
  :action="uploadFileUrl"
  :before-upload="handleBeforeUpload"
  :file-list="fileList"
  :limit="1"
  :on-error="handleUploadError"
  :on-exceed="handleExceed"
  :on-success="handleUploadSuccess"
  :on-progress="uploadProcess"
  :show-file-list="false"
  :headers="headers"
  class="upload-file-uploader"
  ref="upload"
>
  <!-- 上传按钮 -->
  <el-button size="mini" type="primary">选取文件</el-button>
  <!-- 上传提示 -->
  <div class="el-upload__tip" slot="tip" v-if="showTip">
    请上传
    <template v-if="fileSize">
      大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
    </template>
    <template v-if="fileType">
      格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
    </template>
    的文件
  </div>
</el-upload>

<!-- 文件列表 -->
<transition-group
  class="upload-file-list el-upload-list el-upload-list--text"
  name="el-fade-in-linear"
  tag="ul"
>
  <li
    :key="file.uid"
    class="el-upload-list__item ele-upload-list__item-content"
    v-for="(file, index) in list"
  >
    <el-link :href="file.url" :underline="false" target="_blank">
      <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
    </el-link>
    <div class="ele-upload-list__item-content-action">
      <el-link :underline="false" @click="handleDelete(index)" type="danger"
        >删除</el-link
      >
    </div>
  </li>
</transition-group>
<!--进度条-->
<el-progress v-if="isPercentage" :percentage="percentage"></el-progress>

然后既然是封装组件，当然需要父组件传参子组件了 我们用props进行接收

 props: {
// 值
value: [String, Object, Array],
// 大小限制(MB)
fileSize: {
  type: Number,
  default: 80,
},
// 文件类型, 例如['png', 'jpg', 'jpeg']
fileType: {
  type: Array,
  default: () => [
    "swf",
    "flv",
    "mp3",
    "wav",
    "wma",
    "wmv",
    "mid",
    "avi",
    "mpg",
    "asf",
    "rm",
    "rmvb",
    "mp4",
  ],
},
// 是否显示提示
isShowTip: {
  type: Boolean,
  default: true,
},

当然 封装的data也需要
	data() {
return {
  uploadFileUrl: process.env.VUE_APP_BASE_API + "自己接口地址", // 上传的图片服务器地址
  headers: {
    Authorization: "Bearer " + getToken(),
  },
  isPercentage: false, //是否显示进度条
  percentage: 0,
  fileList: [],
};
  },

再就是进度条的封装，

computed: {
// 是否显示提示
showTip() {
  return this.isShowTip && (this.fileType || this.fileSize);
},
// 列表
list() {
  let temp = 1;
  if (this.value) {
    // 首先将值转为数组
    const list = Array.isArray(this.value) ? this.value : [this.value];
    // 然后将数组转为对象数组
    return list.map((item) => {
      if (typeof item === "string") {
        item = { name: item, url: item };
      }
      item.uid = item.uid || new Date().getTime() + temp++;
      return item;
    });
  } else {
    this.fileList = [];
    return [];
  }
},
  },

以及方法

	 methods: {
    // 上传前校检格式和大小
    handleBeforeUpload(file) {
      // 校检文件类型
	      if (this.fileType) {
    let fileExtension = "";
    if (file.name.lastIndexOf(".") > -1) {
      fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
    }
    const isTypeOk = this.fileType.some((type) => {
      if (file.type.indexOf(type) > -1) return true;
      if (fileExtension && fileExtension.indexOf(type) > -1) return true;
      return false;
    });
    if (!isTypeOk) {
      this.$message.error(
        `文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
      );
      return false;
    }
  }
  // 校检文件大小
  if (this.fileSize) {
    const isLt = file.size / 1024 / 1024 < this.fileSize;
    if (!isLt) {
      this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
      return false;
    }
  }
  return true;
},
// 文件个数超出
handleExceed() {
  this.$message.error(`只允许上传单个文件`);
},
//进度条
uploadProcess(event, file, fileList) {
  this.isPercentage = true;
  this.percentage = file.percentage.toFixed(0) * 1;
},
// 上传失败
handleUploadError(err) {
  this.$message.error("上传失败, 请重试");
},
// 上传成功回调
handleUploadSuccess(res, file) {
  console.log(res);
  this.percentage = file.percentage.toFixed(0) * 1;
  if (res.code == "200") {
    this.$message.success("上传成功");
    this.$emit("input", res.data.url);
  } else {
    this.$message.error(res.msg);
  }
  const timer = setInterval(() => {
    //成功后3秒钟后消失并还原
    this.percentage = 0;
    this.isPercentage = false; //是否显示进度条
  }, 3000);
},
// 删除文件
handleDelete(index) {
  this.percentage = 0;
  this.isPercentage = false; //是否显示进度条
  this.fileList.splice(index, 1);
  this.$emit("input", "");
},
// 获取文件名称
getFileName(name) {
  if (name.lastIndexOf("/") > -1) {
    return name.slice(name.lastIndexOf("/") + 1).toLowerCase();
  } else {
    return "";
  }
},
  },
  created() {
this.fileList = this.list;
  },

最后放上全部封装的代码

<template>
  <div class="upload-file">
<el-upload
  :action="uploadFileUrl"
  :before-upload="handleBeforeUpload"
  :file-list="fileList"
  :limit="1"
  :on-error="handleUploadError"
  :on-exceed="handleExceed"
  :on-success="handleUploadSuccess"
  :on-progress="uploadProcess"
  :show-file-list="false"
  :headers="headers"
  class="upload-file-uploader"
  ref="upload"
>
  <!-- 上传按钮 -->
  <el-button size="mini" type="primary">选取文件</el-button>
  <!-- 上传提示 -->
  <div class="el-upload__tip" slot="tip" v-if="showTip">
    请上传
    <template v-if="fileSize">
      大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
    </template>
    <template v-if="fileType">
      格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
    </template>
    的文件
  </div>
</el-upload>

<!-- 文件列表 -->
<transition-group
  class="upload-file-list el-upload-list el-upload-list--text"
  name="el-fade-in-linear"
  tag="ul"
>
  <li
    :key="file.uid"
    class="el-upload-list__item ele-upload-list__item-content"
    v-for="(file, index) in list"
  >
    <el-link :href="file.url" :underline="false" target="_blank">
      <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
    </el-link>
    <div class="ele-upload-list__item-content-action">
      <el-link :underline="false" @click="handleDelete(index)" type="danger"
        >删除</el-link
      >
    </div>
  </li>
</transition-group>
<!--进度条-->
<el-progress v-if="isPercentage" :percentage="percentage"></el-progress>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";

export default {
  props: {
// 值
value: [String, Object, Array],
// 大小限制(MB)
fileSize: {
  type: Number,
  default: 80,
},
// 文件类型, 例如['png', 'jpg', 'jpeg']
fileType: {
  type: Array,
  default: () => [
    "swf",
    "flv",
    "mp3",
    "wav",
    "wma",
    "wmv",
    "mid",
    "avi",
    "mpg",
    "asf",
    "rm",
    "rmvb",
    "mp4",
  ],
},
// 是否显示提示
isShowTip: {
  type: Boolean,
  default: true,
},
  },
  data() {
return {
  uploadFileUrl: process.env.VUE_APP_BASE_API + "接口路径", // 上传的图片服务器地址
  headers: {
    Authorization: "Bearer " + getToken(),
  },
  isPercentage: false, //是否显示进度条
  percentage: 0,
  fileList: [],
};
  },
  computed: {
// 是否显示提示
showTip() {
  return this.isShowTip && (this.fileType || this.fileSize);
},
// 列表
list() {
  let temp = 1;
  if (this.value) {
    // 首先将值转为数组
    const list = Array.isArray(this.value) ? this.value : [this.value];
    // 然后将数组转为对象数组
    return list.map((item) => {
      if (typeof item === "string") {
        item = { name: item, url: item };
      }
      item.uid = item.uid || new Date().getTime() + temp++;
      return item;
    });
  } else {
    this.fileList = [];
    return [];
  }
},
  },
  methods: {
// 上传前校检格式和大小
handleBeforeUpload(file) {
  // 校检文件类型
  if (this.fileType) {
    let fileExtension = "";
    if (file.name.lastIndexOf(".") > -1) {
      fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
    }
    const isTypeOk = this.fileType.some((type) => {
      if (file.type.indexOf(type) > -1) return true;
      if (fileExtension && fileExtension.indexOf(type) > -1) return true;
      return false;
    });
    if (!isTypeOk) {
      this.$message.error(
        `文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
      );
      return false;
    }
  }
  // 校检文件大小
  if (this.fileSize) {
    const isLt = file.size / 1024 / 1024 < this.fileSize;
    if (!isLt) {
      this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
      return false;
    }
  }
  return true;
},
// 文件个数超出
handleExceed() {
  this.$message.error(`只允许上传单个文件`);
},
//进度条
uploadProcess(event, file, fileList) {
  this.isPercentage = true;
  this.percentage = file.percentage.toFixed(0) * 1;
},
// 上传失败
handleUploadError(err) {
  this.$message.error("上传失败, 请重试");
},
// 上传成功回调
handleUploadSuccess(res, file) {
  console.log(res);
  this.percentage = file.percentage.toFixed(0) * 1;
  if (res.code == "200") {
    this.$message.success("上传成功");
    this.$emit("input", res.data.url);
  } else {
    this.$message.error(res.msg);
  }
  const timer = setInterval(() => {
    //成功后3秒钟后消失并还原
    this.percentage = 0;
    this.isPercentage = false; //是否显示进度条
  }, 3000);
},
// 删除文件
handleDelete(index) {
  this.percentage = 0;
  this.isPercentage = false; //是否显示进度条
  this.fileList.splice(index, 1);
  this.$emit("input", "");
},
// 获取文件名称
getFileName(name) {
  if (name.lastIndexOf("/") > -1) {
    return name.slice(name.lastIndexOf("/") + 1).toLowerCase();
  } else {
    return "";
  }
},
  },
  created() {
this.fileList = this.list;
  },
};
</script>

<style scoped lang="scss">
.upload-file-uploader {
  margin-bottom: 5px;
}
.upload-file-list .el-upload-list__item {
  border: 1px solid #e4e7ed;
  line-height: 2;
  margin-bottom: 10px;
  position: relative;
}
.upload-file-list .ele-upload-list__item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: inherit;
}
.ele-upload-list__item-content-action .el-link {
  margin-right: 10px;
}
</style>

喜欢的话就给博主点点赞，你们的赞是我发作品的源动力！笔芯
CSDN私信我，接私活