解决uniapp组件uni-file-picker设置:disable-preview=“true“关闭预览不生效的问题 - 禁用图片预览无效的手动解决办法

Posted 2023-01-27 Rudon滨海渔村

效果图

图片上传后，依然保持“不预览”的样子

Bugs

1. 按照官方手册设置 :disable-preview="true" mode="grid" 依然会显示预览图
2. H5无法通过$ref获取到组件进行clearFiles操作，
   <uni-file-picker ref="xx">
   [Vue warn]: Error in onShow hook: "TypeError: Cannot read property 'clearFiles' of undefined"
   this.$refs.xx.clearFiles()
   

 

解决方案

手动绑定:value="listSelected"到uni-file-picker组件，

再按需求手动进行数组变量listSelected的修改，即可删除指定已选图片的预览

完整代码：

<uni-file-picker :value="listSelected" :autoUpload="false" :disable-preview="true" mode="grid" file-mediatype="image" @select="SelectImg" limit="1">
	<view>
		+
	</view>
</uni-file-picker>



<script>
data() 
	return 
		listSelected: []
	
,

methods: 
	// 清空选中的图片的预览
	clearSelectedImg () 
		// 关闭第一个图片的预览 （文件传完就清掉）
		this.listSelected.splice(0, 1)
	

</script>

感谢

uniapp中的uni-file-picker组件多图上传问题_phyit的博客-CSDN博客前言：在uniapp官方文档中的uni-file-picker组件可实现图片上传功能，官方文档：uni-app官网 中的案例不能完全满足需求，在接口上传失败的时候，需要页面不回显失败的图片，仅回显显示上传成功的图片，因为多图异步上传顺序的问题，可能会导致同时操作list，以至于删除图片出错。所以我才用多图同步顺序上传来规避这个问题。以下是代码：view代码：<uni-file-picker :value="filePathsList" :auto-upload="false" file-medihttps://blog.csdn.net/tgs2033/article/details/123053662