摘要：最近项目中涉及很多文件上传的地方，然后文件上传又有很多限制。比如文件大小限制，文件个数限制，文件类型限制，文件上传后的列表样式自定义，包括上传进度条等问题。下面是我对的上传组件的一些改造，点击查看源码。
最近项目中涉及很多文件上传的地方，然后文件上传又有很多限制。比如文件大小限制，文件个数限制，文件类型限制，文件上传后的列表样式自定义，包括上传进度条等问题。下面是我对element-ui的上传组件的一些改造， 点击查看源码。
我是自己维护了一个列表数据，再对这个列表数据进行一些操作，没用组件自带的。先看看我的组件模版
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-cli在2018年8月份发布了3.0版本，经过重构之后，可以说是一个船心版本！在项目都落地之后，就想升级一下cli版本，尝一尝3.0带来的舒适，也是为后面项目的开展做一个...
摘要：更新今天反复试了，不用区分测试环境还是生产环境，统一都用就可以了背景之前自己搭建了一个的后台项目，坑很多，其中一个就是资源加载的方案，由于是后台项目，之前一直没放在心上，看到一些资源优化方案后，觉得有必要弄一下。
20180829 更新
今天反复试了，不用区分 测试环境还是 生产环境，统一都用 cdn 就可以了
之前自己搭建了一个 vue + tp5.1 的后台项目（https:...
摘要：正文上传图片到七牛云这个需要前后端的配合才能实现，这里是官方的参考链接。参考链接组件的怎么获取进度值谷歌找到的其一谷歌找到的其二完
最近在做后台管理项目，采用的 vue-element-admin ，上传图片是一个很常用的功能，也遇到了很多问题，刚好趁此机会做一些总结。
初步总结下会提到的问题，目录如下：
el-upload 自定义上传方法
图片上传到七牛云
图片压缩后再上传（...
Neilyo
摘要：无效方案根据交易所小时成交量占比和实时价格加权计算得到渲染结果是一个包含了文字，同时有名为的，并无小图标，后边中括号结构里只能有一个有待考证。
Table
只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。例如：
这里文档只给了一种固定高度250px的解决方案，实际应用大多数是需要自适应占满父元素，超出滚动固定表头的...
Imfan
阅读 2083·2021-10-11 10:59
阅读 2478·2021-10-11 10:58
阅读 3154·2021-09-08 09:35
阅读 3549·2021-09-02 15:21
阅读 1311·2019-08-30 15:53
阅读 2495·2019-08-29 14:16
阅读 1963·2019-08-26 14:00
阅读 2845·2019-08-26 13:52
