如何在 vue.js 版本 3 中上传文件

Question

I wanted to upload file using vue.js version 3.

I can able to import ref but not sure how to use it for fetching file data?

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

The actual file content is not storing in the this.file variable

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

Answer 1

Since you're using the option api you don't need the ref just use this.$refs.file :

   onChangeFileUpload() {
        debugger;
        this.file = this.$refs.file[0]; 
    }

Answer 2

Vue3.js upload file to server using composition 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>

Answer 3

Here's a simple component you could use for a file upload with the options api. No ref needed.

fileUpload.vue

<template>
    <input type="file" @change="onChange($event)">
</template>

<script>
export default {
    props: ['modelValue'],
    methods: {
        onChange(event) {
            this.$emit('update:modelValue', event.target.files[0]);
        },
    },
};
</script>

Your component...

<template>
    <form novalidate @submit.prevent="onSubmit">
        <file-upload v-model="form.file"></file-upload>
    </form>
</template>

<script>
import fileUpload from 'fileUpload';
export default {
    components: { fileUpload },
    data: () => ({ form: { file: null } }),
    methods: {
        onSubmit() {
            console.log(this.form);
            // post the form to the server
        }
    }
}
</script>

Answer 4

I can summarize the answer as below.

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