uniapp 本地相册选择图片

最新推荐文章于 2025-10-16 17:22:44 发布

原创最新推荐文章于 2025-10-16 17:22:44 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

uniapp 专栏收录该内容

3 篇文章

订阅专栏

本文档介绍如何在uniapp中实现从本地相册选择图片并进行管理，包括删除和添加图片的功能。通过`uni.chooseImages`接口控制上传图片数量，并将选择的图片路径添加到数组中，方便在应用中展示。

标题 uniapp 本地相册选择图片

export default {
    data(){
       return {
            imageLists:[]
       }
	}
}

methods:{
   delete(index){    //  获取该数组的索引值， 删除 ( imageLists[] 数组里面 ) 的图片
      this.imageLists.splice(index,1)     // 拿到改图片的位置（索引值）， 删除这一张图片
   },
    addImage(){              //  事件名称  （自定义）
        let count = 5 - this.imageLists.length
         uni.chooseImages({
             count:count ,                               //  上传图片数量的控制
             success(res){
               let tempfilepaths = res.tempfilepaths     //  图片的本地文件路径列表
               tempfilepaths.forEach((item,index) =>{
                 if(index < count){             // 处理H5 端，多选的情况  （只有小于 count 才会被push 到数组里面）
	                  this.imageLists.push({                 // push 对象到  imageLists[] 数组里面
	                    url:item
                 	})
                 }
               })
             }
         })
    },
}