[Vuejs]-How to upload file using laravel vue api?

by

0👍

✅

Firstly you need to call onchnage function like @change="onChange($event).
Secondly you need to put code in onchange function like below.
onChange(event) {this.category.file = event.target.file;}
And last you need to use FormData and pass Header in api in create function like below.

EDIT

methods: {
    async create() {
        var form = new FormData();
        form.append("title", this.category.title);
        form.append("description", this.category.description);
        form.append("name", this.category.name);
        form.append("file", this.category.file);
        var config = {
            header: { "Contect-type": "multipart/form-data" },
        };
        await this.axios.post("/api/category", form, config).then(response => {
            this.$router.push({ name: "categoryList" });
        }).catch(error => {
            console.log(error);
        });
    },
    onChange(event) {
       this.category.file = event.target.file;
    }
}

0👍

You just need to use FomrData.
Something like this

const formData = new FormData;
formData.append('file_index', this.uploadedFileIndex);
formData.append('file', file);
formData.append('user_tz', Intl.DateTimeFormat().resolvedOptions().timeZone);
formData.append('file_tags', JSON.stringify(fileTagIds));
formData.append('in_folder', this.inFolder);
formData.append('favorites', this.favorites);

Append all your form data in fromData,and then send your fromData

Leave a comment