typescript - Cum să încarci un fișier în vue.js versiunea 3

Am vrut să încarc un fișier folosind vue.js versiunea 3.

Pot importa ref, dar nu sunt sigur cum să îl folosesc pentru a prelua datele fișierului?

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; 
    }
};

Conținutul real al fișierului nu este stocat în variabila this.file

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

Răspuns #1

Pot rezuma răspunsul astfel.

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,
        }
    }
});

Răspunsul #2

Vue3.js încărcare fișier pe server folosind API-ul de compoziție

<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>

Răspunsul #3

Abordarea din 2023 cu cea mai recentă sintaxă

Folosesc <script setup lang="ts"> pentru API-ul de compoziție în Vuejs 3. lang="ts" specifică faptul că limbajul este TypeScript în loc de 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>

Ce se întâmplă exact?

ref este un atribut special care ne permite să obținem o referință la un element DOM sau la un copil.

Pentru a accesa ref în șablon, trebuie să declarăm un ref în script cu același nume const fileInput=ref<HTMLInputElement | null>(null);

Variabila files este un obiect asemănător unui array care poate conține mai multe fișiere. Pentru a accesa primul fișier sau unicul fișier, îl putem accesa astfel: const file=files.value[0] acest lucru va extrage primul obiect fișier din files și apoi poți folosi fișierul după cum dorești.

S-ar putea să vrei să obții numele:

file.name

Sau extensia:

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

Sau numele fără extensie:

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