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

最新推荐文章于 2025-06-10 19:59:07 发布

dalter

最新推荐文章于 2025-06-10 19:59:07 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序文章标签：小程序 javascript vue.js

本文链接：https://blog.youkuaiyun.com/dalter/article/details/122364785

小程序专栏收录该内容

4 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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
    })
  }