vant-uploader使用readonly导致意料之外的问题

vue
<script setup>
/**
 * @description: 仅会在i国网环境触发
 * @description: 图片选择并上传方法
 */
const chooseImaged = async () => {
  //...
}
 
/**
 * @description: 仅开发环境触发
 * @description: 图片选择并上传方法
 */
const uploadWhenDev = async () => {
  //...
}
 
const isDev = computed(() => {
  const isDev = import.meta.env.MODE === 'dev'
  return isDev
})
</script>
 
<template>
  <div>
    <div v-if="title" class="title" :class="{ required }">{{ title }}</div>
 
    <van-uploader
      ref="uploaderRef"
      v-bind="$attrs"
      :class="{ hide: !isDev }"
      :deletable="!isDisabled"
      v-model="$fileList"
      :show-upload="!isDisabled"
      :max-count="maxCount"
      :preview-full-image="false"
      :multiple="maxCount > 1"
      :after-read="uploadWhenDev"
      :before-delete="beforeDelete"
      @click-preview="clickPreview"
    >
      <!-- i国网app环境，使用api获取图片 -->
      <div v-if="!isDisabled" class="van-uploader__upload" @click="chooseImaged">
        <i class="van-icon van-icon-photograph van-uploader__upload-icon"></i>
      </div>
    </van-uploader>
  </div>
</template>
 
<style scoped lang="scss">
.title {
  color: #000000e6;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}
 
:deep(.van-uploader) {
  margin-top: 12px;
 
  &.hide {
    .van-uploader__input {
      display: none;
    }
  }
 
  .van-uploader__preview {
    border-radius: 6px;
    overflow: hidden;
  }
 
  .van-image__img {
    border: 1px solid #dcdfe6;
  }
}
</style>