vue+iview实现文件上传

vue+iview文件上传(base64编码、类型验证、大小限制、多文件上传及文件预览)

​ iview对文件上传提供了一个专门的标签Upload,不过这个标签默认需要一个接口action属性,但一般我们向后台上传文件并不会选择文件直接就上传了 而是需要和其他的值一起发送请求给后台,并且文件都是转成base64编码。

iview提供了一个方法阻止默认上传:before-upload这个方法是在上传文件之前做的一些操作,当这个方法返回false表示手动上传,不会通过action属性来提交文件

base64、类型验证、大小限制:


 
 
 
{{file.name}}

注意:当你的before-upload返回false后。upload的其他方法是不会触发的,比如文件格式验证和文件大小限制的这个钩子是发生在before-upload之后的均不会触发

Upload标签提供一个multiple属性允许上传多个文件

多文件上传、图片预览:

vue+iview实现文件上传_第1张图片

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的:(vue+iview实现文件上传)