Vue و فایل ورودی – پاک کردن فایل یا انتخاب همان فایل

آیا تا به حال برای شما پیش آمده است که یک کامپوننت انتخابگر فایل داشته باشید، مدل فایل را پاک کنید اما نتوانید دوباره همان فایل را انتخاب کنید؟

کدپن: https://codepen.io/schirrel/pen/YzRGrvq

خوب توضیح دادن آن کمی سخت و کنجکاو است.
اول از همه به TL/DR:
باید از Vue’s استفاده کنید $refs و ورودی را null قرار دهید.

حالا اگر می‌خواهید دلیل آن را بفهمید، اجازه دهید از چند چیز مهم عبور کنیم:

اول: Vue با v-model و ورودی فایل کار نمی کند، حتی در مورد آن در مخزن رسمی Vue: Discussion بحث می کند.

حالا بیایید بفهمیم چرا کار نمی کند، دو چیز اصلی:

1. ورودی با type="file" فقط محرک ها change رویداد، در حالی که v-model گوش می دهد input رویداد.
2. مدل V نیاز به تنظیم دارد value ویژگی html، ff شما همیشه سعی می کنید انجام دهید :value="myFileModel" این خطا نشان داده خواهد شد: > خطا در nextTick: “InvalidStateError: تنظیم ویژگی “value” در “HTMLInputElement” ناموفق بود: این عنصر ورودی یک نام فایل را می پذیرد که ممکن است فقط به صورت برنامه نویسی روی رشته خالی تنظیم شود.

بنابراین با این یک سوال پیش می آید: چگونه یک فایل را پاک کنیم، و مهمتر از همه، چگونه امکان انتخاب مجدد وجود دارد؟

بیایید یک مورد استفاده ساده را رنگ کنیم: شما بسته بندی فایل خود را دارید که از یک ورودی فایل استفاده می کند (بدیهی است) اما فایل را در data. مثال:

<template>
 <label for="inputFile">
      Click here to select you file
      <input type="file" name="inputFile" id="inputFile" @change="selectFile" />
    </label>
    <span v-if="file">
      File Selected {{ file.name }}
      <button @click="clearFile">remove</button>
    </span>
</template>
<script>
export default {
  data() {
    return {
      file: null
    };
  },
  methods: {
    selectFile(event) {
      this.file = event.target.files[0];
    },
    clearFile() {
      this.file = null;
    }
  }
};
</script>

حتی اگر clearFile در حال تنظیم است file به عنوان null، هنگام انتخاب مجدد فایل، @change دوباره فعال نمی شود. به همین دلیل است که ارزش html همچنان، the است file پشتیبانی از داده ها بر آن تأثیر نمی گذارد. به مثال کدپن نگاهی بیندازید.

زمانی که ما آن را دیدیم :value با فایل ها کار نکنید، راه مناسب برای انجام این کار دسترسی به HTML است <input type="file" /> و این مقدار را به صورت برنامه ای تنظیم مجدد کنید.

با افزودن الف ref="fileInput" به <input> و داخل clearFile روش اضافه کردن:

this.$refs.fileInput.value = null

حالا کار میکند:

راه حل نهایی کدپن: https://codepen.io/schirrel/pen/XWyjeOw

توجه: این رفتار رایج در فریمورک ها است.