element的上传如何获取路径_element Ui 上传组件upload提交的文件目录 集成进度条样式...

这篇文章主要写element Ui框架的上传组件，有关键的upload上传文件的位置，怎么取到上传的文件，还有上传组件集成的进度条样式修改。

upload上传组件

组件的引用就不多说了。

钩子主要用到的有：

on-success；上传成功的钩子。

on-progress；上传时的钩子，主要用来做进度条。

//进度条

onProgress(e, file, v) {

this.videoFlag = true;

this.videoUploadPercent = parseInt(file.percentage.toFixed(0), 10);

},

file.percentage，会返回上传时的进度，打印的时候一个文件会返回4次上传进度，取整再返回给进度条组件progress的percentage就可以了。(可能最后会出现没到100%的情况，可以在进度条成功钩子函数把值给100，他就会在成功的时候跳到100%了)

before-upload；上传文件之前的钩子，主要用作上传文件的类型判断，大小判断。

file-list；上传的文件列表。

这个属性就比较坑了。刚做上传的时候，以为绑定了这个属性，我上传的文件，他会在绑定的数组里面增加。结果发现根本没有，查阅到资料说是存在的，只是没有去动态更新它的值，(小弟比较愚笨，不知道怎么测试是不是动态更新的，知道的大哥还望请教请教)。

然后我是这样做的：另外创建一个数组，在上传成功的方法里面把成功的值push进数组。(注意：如果push的数组跟file-list绑定的数组一致，会出现进度条跟上传文件不重叠的情况，因为你是上传成功再push进去的，本身已经创建了一个文件，你push会替换掉原有的节点)

取上传的文件列表$refs.upload.uploadFiles

ref="upload";

//uploadFiles可以取到上传时的文件列表

$refs.upload.uploadFiles

// $refs['upload'][0].uploadFiles //用法同上

同一页面多个上传，ref的用法应该是同.getElementById('upload')，获取唯一的id，但是如果我的需求是多个的话，可能需要动态更改id，给个ref使用参考页面

:ref="'upload'+item.id"

//用法如 $refs['upload'+id][0].uploadFiles;

onUpload(id){

$refs['upload'+id][0].uploadFiles;

}

上传文件集成的进度条

可以直接更改css样式：

// 进度条背景色

.el-progress svg>path:first-of-type{

stroke: #fff!important;

}

// 进度条颜色

.el-progress svg>path{

stroke: #fcc454!important;

}

因为进度条是用h5的canvas画布写的，用到，而且标签已经被写进组件里面。