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;
}
posted @ 2024-01-29 13:43  乌拉小考  阅读(696)  评论(0编辑  收藏  举报