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