vue基于vant的uploader上传图片

小白第一次使用有赞的vant组件库, 这里记录一下个人在项目上的一些使用, 方便以后查阅.

  

    

      

        
        

          
{{item.goods_title}}
          
{{item.sku_param_value}}
        
      
      

        愉悦值:
        
      
    
    

      
    
    

      
        

          
          
上传图片
        
      
    
  

因为是一个商城项目, 所以DOM结构稍微有点多, li代表每个商品, 因为一个订单里不可能只有一个商品, 所以这里使用循环。
这里主要介绍一下van-uploader上面的属性和方法:
name：标识符，可以在回调函数的第二项参数中获取;
before-delete：文件删除前的回调函数；
after-read:文件读取完成后的回调函数；
v-model：绑定已经上传的图片列表，并展示图片列表的预览图；
max-count：文件上传数量限制;
这里是项目中使用到的一些属性，官网上会有更加详细的介绍：https://youzan.github.io/vant/#/zh-CN/uploader

---

/*上传图片*/
uploadImgs(file, name) {
  let data = new FormData();    
  let sub = name.name;  //标识, 使用的商品的索引
  //file是当前file对象, 此对象包含file和content
  data.append("picture", file.file);    
  this.$http
    .post(
      `URL`,
      data,
      {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      }
    )
    .then(res => {
      if (res.data.statusCode == 200) {
      /*因为是评价功能, 还需要把图片传到后台, 这里先存一下*/
        this.shopList.items[sub].uploadImgs.push(res.data.picture);
      }
    });
},

/*点击删除图片*/
delImgs(file, name) {
    //标识, 使用的商品的索引
  let sub = name.name; 
  //uploadImgs是要传递给后台的图片数组
  //name.index代表图片的索引
  this.shopList.items[sub].uploadImgs.splice(name.index, 1);
  //fileList是展示预览的图片数组
  this.shopList.items[sub].fileList.splice(name.index, 1);
},

以上就是本人项目中使用到的上传图片, 如果有哪些不足或错误, 欢迎留言评论。