vue,element-ui中的上传upload组件,使用方法,使用详解

  • 时间:
  • 来源:互联网

      之前写了一个项目,涉及到文档和视频的上传.需求大概是这个样子,拿上传视频举例子吧,首先是将选择的视频上传到文件服务器上,接着文件服务器会返回视频的存储链接还有视频名,在后面保存视频的时候会用到这两个参数的.另外,上传成功的视频名字要显示在左侧,并且是可以修改的.视频上传成功后,还可以给相应的视频添加附件,也就是和视频配对的文档(注意,这里巨恶心).首先是要给当前视频加,其次添加文档的时候还要可以修改文档名,也就是在上传之前就需要更改文档的名字,不然后面和视频绑定后就不好更改了.还有很多逻辑,,我不想说了,说的头疼.总的来说,就是我们需要用到上传组件的很多状态,参数.下面一一解释吧

1.  action: 上传的地址,也就是你上传的路径

2.  multiple: 是否支持多选文件,是个布尔属性,写了就可以多个上传了(按住ctrl然后点击文件就可以多选了)

3.  data:  上传时附带的额外参数

4.  name:  上传的文件字段名

5.  show-file-list:  是否显示已上传文件列表,布尔属性

6.on-preview:  点击文件列表中已上传的文件时的钩子(我是做删除已上传的附件时候用到的)

7.on-remove:  文件列表移除文件时的钩子

8.on-success: 件上传成功时的钩子

9.on-error:  文件上传失败时的钩子

10.on-progress: 文件上传时的钩子

11.on-change: 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用

             这个要特别注意,这个是有两个参数file,fileList.在file中有个字段是status,有三种状态,ready,success,fail.

             我的需求是在选择文件后先不要上传, 更改了文件名之后再手动上传.所以,我用到的是ready的时候.注意,不可以在before-                upload的时候修改,因为此时文件已经开始上传了.所以on-change这个属性还是很常用的,用来在上传前对文件做一些修                  改.

12.before-upload: 上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。

13.before-remove:  删除文件之前的钩子,参数为上传的文件和文件列表,若返回 false 或者返回 Promise 且被 reject,则停止删除。

14.auto-upload:  是否在选取文件后立即进行上传,布尔值,若不立即上传则需要使用手动上传,手动上传的代码是:

this.$refs.upload.submit();

注意upload是你的上传组件中写的ref='upload',需要替换成你自己的

15. limit:  最大允许上传个数

16.on-exceed:  文件超出个数限制时的钩子

17.clearFiles: 清空已上传的文件列表(该方法不支持在 before-upload 中调用)

this.$refs.upload.clearFiles()

 

橙程橙
发布了24 篇原创文章 · 获赞 6 · 访问量 2728
私信 关注

本文链接http://element-ui.cn/news/show-930.aspx