vant的文件上传:用于将本地的图片或文件上传至服务器,并在上传过程中展示预览图和上传进度。目前 Uploader 组件不包含将文件上传至服务器的接口逻辑,该步骤需要自行实现。
本文主要说一下after-read的回调方法,及在after-read回调中需要做的一些处理以及参数字节流的转换
after-read回调中会返回2个参数:
- file:返回一个file对象,里面包含一个content(一个转换为base64的url)
- detail:额外信息,包含name和index
vant的upload没有提供上传到服务器的逻辑,所以需要自己写上传到服务器的方法,在after-read回调中处理。
<!-- 自定义文件上传样式 --> <van-uploader v-model="img" :max-count="1" :after-read="uploadImg" :before-delete="deleteImg"> <div class="btn"> <img src="./img/images/icon-add.png" alt="" /> </div> </van-uploader>
uploadImg(file) { //处理为字节流参数 var imgUrl = file.content; var that = this; var img = file.file; var reader = new FileReader(); reader.readAsDataURL(img); reader.onloadend = function(e) { var file = img; var param = new FormData(); param.append("file", file, file.name); //此处写ajax请求上传到服务器方法 }; }, deleteImg(file, detail) { console.log(file, detail)this.img = [] },
其他设置,如文件个数限制,文件大小限制等可参考官网:https://vant-contrib.gitee.io/vant/#/zh-CN/uploader