vant weapp van-uploader组件实现小程序的图片上传

最新推荐文章于 2024-05-11 09:35:41 发布

原创最新推荐文章于 2024-05-11 09:35:41 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #javascript #vue.js

小程序专栏收录该内容

4 篇文章

订阅专栏

该博客介绍了如何在Vue项目中利用van-uploader组件进行图片上传操作。通过设置属性如`preview-size`、`max-count`等实现图片预览和数量限制，并展示了`afterRead`与`deleteClick`事件处理图片读取后的上传及删除功能。代码示例详细解释了文件列表的更新过程。

<van-uploader
 use-slot 
preview-size="72"
 data-idx="{{index}}" 
file-list="{{ fileList }}"
 preview-image="{{false}}"
  bind:after-read="afterRead"
 bind:delete="deleteClick"
 v-model="fileList" 
preview-image 
multiple
 max-count="5" />

//js代码:
 /**
   * 页面的初始数据
   */
  data: {
     fileList: []
  },


 // 图片选择回调
  afterRead(event) {
    let that = this;
    wx.showLoading({
      title: '上传中...'
    });
    const file = event.detail.file;
    var jsonlist = this.data.fileList.concat(file);
    this.setData({
      fileList: jsonlist
    })
    wx.hideLoading();
  },
  deleteClick(event) {
    var jsonlist = this.data.fileList;
    jsonlist.splice(event.detail.index, 1)
    this.setData({
      fileList: jsonlist
    })
  }