Uploader 文件上传

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