解决uniapp无法显示uni-file-picker的问题 - 不显示图片选择框 - 图片上传按钮消失

Posted 2022-04-09 Rudon滨海渔村

效果图

解决前（图片选择框死活不出来） 

后

 

实现步骤

在外面套一个宽高写死的容器：

<view style="width: 400rpx; min-height: 300rpx;">
	<uni-file-picker limit="9"></uni-file-picker>
</view>

搞定！

以下是uniapp官方的css，仅供阅读，无需理会

	.uni-file-pickerheight 
	    box-sizing: border-box;
	    overflow: hidden;
	
	
	
	
	.uni-file-picker__container 
	    display: flex;
	    box-sizing: border-box;
	    flex-wrap: wrap;
	    margin: -5px;
	
	
	.file-picker__box 
	    height: 0px;
	    width: 33.3%;
	
	
	.file-picker__box 
	    position: relative;
	    width: 33.3%;
	    height: 0;
	    padding-top: 33.33%;
	    box-sizing: border-box;
	
	
	
	.file-picker__box-content 
	    border-width: 1px;
	    border-style: solid;
	    border-color: rgb(238, 238, 238);
	    border-radius: 3px;
	
	
	.is-add 
	    display: flex;
	    align-items: center;
	    justify-content: center;
	
	
	.file-picker__box-content 
	    position: absolute;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    margin: 5px;
	    border: 1px #eee solid;
	    border-radius: 5px;
	    overflow: hidden;
	
	
	.is-addheight 
	    display: flex;
	    align-items: center;
	    justify-content: center;
	
	
	.icon-addheight 
	    width: 50px;
	    height: 5px;
	    background-color: #f1f1f1;
	    border-radius: 2px;
	
	
	.rotateheight 
	    position: absolute;
	    -webkit-transform: rotate(90deg);
	    transform: rotate(90deg);