• 周六. 7月 2nd, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

Uploader 文件上传

admin

11月 28, 2021

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

发表评论

您的电子邮箱地址不会被公开。