تایپاسکریپت - چگونه فایل را در نسخه ۳ ویو.جیاس آپلود کنیم

من میخواستم با استفاده از vue.js نسخه ۳ فایل آپلود کنم.

من میتوانم ref را وارد کنم اما مطمئن نیستم چگونه از آن برای دریافت دادههای فایل استفاده کنم؟

FileUploadTest.vue

<template>
<h1>File Upload</h1>
<div class="container">
    <div>
      <label>File
        <input type="file" id="file" ref="file" v-on:change="onChangeFileUpload()"/>
      </label>
        <button v-on:click="submitForm()">Upload</button>
    </div>
  </div>
</template>

<script src="./FileUploadTest.ts" lang="ts"></script>

FileUploadTest.ts

import { Options, Vue } from "vue-class-component";
import { ref } from 'vue';
import axios from "../../axios/index";

@Options({})
export default class FileUploadTest extends Vue {

    protected file: any;

    submitForm() {
        const formData = new FormData();
        formData.append('bytes', this.file);

        axios.post('https://localhost:44313/api/app/file/save',
            formData,
            {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }
        ).then(function (data) {
            console.log(data.data);
        })
        .catch(function () {
            console.log('FAILURE!!');
        });
    }

    onChangeFileUpload() {
        debugger;
        this.file = ref(["file"]).value; 
    }
};

محتوای واقعی فایل در متغیر this.file ذخیره نمیشود

this.file = ref(["file"]).value; 

پاسخ شماره ۱

میتوانم پاسخ را به صورت زیر خلاصه کنم.

FileUpload.vue

<template>
  <div>
    <input
      type="file"
      @change="onFileChanged($event)"
      accept="image/*"
      capture
    />
  </div>
</template>

FileUpload.ts

import { defineComponent, ref } from "vue";

export default defineComponent({

    name: "FileUpload",

    setup() {
        const file = ref<File | null>();
        const form = ref<HTMLFormElement>();

        function onFileChanged($event: Event) {
            const target = $event.target as HTMLInputElement;
            if (target && target.files) {
                file.value = target.files[0];
            }
        }

        async function saveImage() {
            if (file.value) {
                try {
                // save file.value
                } catch (error) {
                    console.error(error);
                    form.value?.reset();
                    file.value = null;
                } finally {
                }
            }
        };

        return {
            saveImage,
            onFileChanged,
        }
    }
});

پاسخ شماره ۲

آپلود فایل به سرور با استفاده از Vue3.js و API کامپوزیشن

<template>
      <input ref="file" v-on:change="handleFileUpload()"  type="file">
</template>
<script>

import { ref} from "vue"

export default{
    name:'Add',

    setup() {
        const file = ref(null)

        const handleFileUpload = async() => {
           // debugger;
            console.log("selected file",file.value.files)
            //Upload to server
        }

        return {
          handleFileUpload,
          file
       }
    }
}

</script>

پاسخ شماره ۳

رویکرد ۲۰۲۳ با آخرین نحو

من از <script setup lang="ts"> برای API ترکیبی در Vuejs 3 استفاده میکنم. lang="ts" مشخص میکند که زبان TypeScript به جای JavaScript است.

<template>
    <main>
        <input ref="fileInput" type="file" @change="handleFileChange" />
        <button @click="doSomething">do something</button>
    </main>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const fileInput = ref<HTMLInputElement | null>(null)
const files = ref()

function handleFileChange() {
    files.value = fileInput.value?.files
}

function doSomething() {
    const file = files.value[0]
    console.log(file)
    // and do other things...
}
</script>

دقیقا چه اتفاقی در حال رخ دادن است؟

ref یک ویژگی ویژه است که به ما امکان میدهد ارجاعی به یک عنصر DOM یا فرزند آن به دست آوریم.

برای دسترسی به ref در قالب، نیاز داریم که یک ref با همان نام در اسکریپت اعلام کنیم const fileInput=ref<HTMLInputElement | null>(null);

متغیر files یک شیء مشابه آرایه است که میتواند شامل چندین فایل باشد. برای دسترسی به اولین یا تنها فایل میتوانیم به این صورت دسترسی پیدا کنیم: const file=files.value[0] این اولین شیء فایل در files را استخراج میکند و سپس آماده هستید تا از فایل به هر نحوی که میخواهید استفاده کنید.

ممکن است بخواهید نام را بگیرید:

file.name

یا افزونه:

file.name.split('.').pop();

یا نام بدون پسوند:

file.name.substring(0, file.name.lastIndexOf('.'))