UNIAPP使用<input type="file"/>选择文件
首先说明,通过<input type="file"/>
选择文件在@change
方法没有回调,没法获取到选择的文件。
设置样式,通过将<input type="file">
放置到要显示的样式上面,然后设置opacity=0
来进行先显示就能不显示还能触发点击了:
<view class="upload-button">
<view>
<image class="icon-upload" src="@/static/images/common/ic_upload.png" />
APP添加文件
</view>
<input ref="fileInputRef" type="file" class="select-file-input" @change="handleFileSelectChange" />
</view>
.upload-button {
background: rgba(12, 127, 252, 0.15);
border-radius: 6rpx;
margin-top: 30rpx;
color: #0c7ffc;
height: 88rpx;
font-size: 34rpx;
font-weight: 500;
text-align: center;
position: relative;
}
.icon-upload {
width: 30rpx;
height: 30rpx;
margin-right: 24rpx;
}
.select-file-input {
width: 100%;
height: 80rpx;
z-index: 99;
position: absolute;
background-color: #0e81ff;
opacity: 0;
}