iview upload手动上传,文件上传 vue
本文主要详细介绍vue iview的文件上传实现。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
vue+iview文件上传(base64编码、类型验证、大小限制、多文件上传和文件预览)
Iview为文件上传提供了一个特殊的标签Upload，但是这个标签默认需要一个接口动作属性。但是一般我们上传文件到后台的时候，并不是选择直接上传文件，而是需要和其他值一起向后台发送一个请求，文件全部转换成base64代码。
Iview提供了阻止默认上传的方法：before-upload。这个方法是上传文件前的一些操作。当该方法返回false时，表示手动上传，不会通过action属性提交文件。
Base64，类型验证，大小限制：
上传
:之前-上传=之前
操作=
按钮图标= iOS-cloud-upload-outline 文件上传/按钮
/上传
div v-if=file！==null“{ file . name } }/div
脚本
导出默认值{
data(){
返回{
文件：空
}
}
方法：{
Before(file) {//上传文件前的钩子。参数是上传的文件。如果返回false或Promise，上传将被停止。
this.file=file
const FileExt=this . file . name . replace(/。\./, );//获取文件的后缀
If (file.size 2097152) {//限制文件的大小
这个。$Message.error(file.name 大小超过了2M！)
This.file=null //如果文件超出大小，则清空文件
} else if ([mp3]。(fileext . to lower case())==-1){//确定文件是否为MP3格式。
这个。$Message.error(请上传以mp3结尾的文件)；
this.file=null
}否则{
Const reader=new FileReader() //读取文件的字符流
Reader.readAsDataURL(file)//以字符串形式读取文件，该字符串的DataURL以data:开头。
reader.onload=e={
//读取的image base64数据码可以传到后台。
const code=e . target . result；
this.algorithmData.videoFiles=代码
}
}
返回false
},
/*以上判断文件格式的方法有很多。file对象包含文件的类型属性。打印该文件以查看有哪些文件属性。
对于一般的文件格式可以显示类型，但是对于像ini这样的配置文件类型，你不能给出你的类型。
如果背景明确指出具体后缀，用这个就很没礼貌了。
如果(！/image\/\w /。test(file.type))只要允许所有图像类型，就不需要通过后缀名称来判断。
*/
}
}
/脚本
注意：，当您的上传前返回假。不会触发其他上传方法。比如文件格式验证和文件大小限制的挂钩，在pre-upload之后就不会触发。
Upload标签提供multiple属性，允许上传多个文件。
多文件上传和图片预览：
div class= demo-upload-list v-for= fileSrc in srcList
img :src=fileSrc alt= ！-图片预览部分-
/div
工具提示内容=文件格式为jpg，jpeg，png 位置=右
上传
:before-upload= handleBeforeUpload
多个的
type=drag
操作=
style= display:inline-block；宽度：58px
div style= width:58px；高度：58px行高：58px
图标类型=ios-camera 大小= 20 /图标
/div
/上传
/工具提示
脚本
导出默认值{
data(){
返回{
上传列表：[]，
srcList=[]
}
}
方法：{
handleBeforeUpload(文件){
/* const FileExt=file . name . replace(/。\./, );*/
if(this.uploadList.length3) {
if (file.size 2097152) {
这个。$Message.error(file.name 大小超过了2M！)
this.file=null
} else if(！/image\/\w /。测试(file.type)) {
这个。$Message.error(请上传以jpg、jpeg、png等结尾的图像文件。);//FileExt.toLowerCase()
this.file=null
}
this.base64(文件)
this.uploadList.push(文件)
}
否则{
这个。$Message.warning(只能上传3张图片！)
}
返回false
},
base64(文件){
let reader=new FileReader()
reader.onload=(e)={
this . srclist . push(e . target . result)//将base64代码存储在路径数组中
}
reader.readAsDataURL(文件)
},
}
}
/脚本
vue.js的学习教程请点击专门的vue.js组件学习教程和Vue.js前端组件学习教程进行学习。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。