Fórum Academy - Upload de Arquivos Vuejs

Criador Jean Silva 15/11/2022

Olá professor, boa tarde!

Pode me ajudar por favor?

Estou tentando efetuar upload de arquivo via Vuejs para o Laravel, a parte do backend está funcionando, via postman consigo salvar no banco os dados e o arquivo no storage, portanto ao tentar efetuar o procedimento via vuejs, o objeto fica como vazio e a minha request para o laravel vai null ou vazio, portanto inspencionando no vuetools, o input é populado, mas não enviado, então acredito que o erro é em meu formdata, não sei mas o que fazer kkk.

Html - Input

             <div class="mb-3">
                                <label class="form-label" for="file">Arquivo</label>
                                <input class="form-control" type="file" id="file"
                                    @change="formUpload.file = $event.target.files[0]"/>
                        </div>

Setup() ->

 const formUpload = reactive({
            file:               ''
        })

        const characterCount = computed(() => {
            return form.title.length
        })
     
        const salvarRequestMain = async () => {
            await storeRequestMain, storeRequestUploadFile({...form, ...formUpload});
            // await storeRequestUploadFile({...formUpload});
        }

        watch(() => formUpload.file, (valueAtual) => {
            form.file = valueAtual
        })

2 comentários

Criador Jean Silva 15/11/2022

Meu composable

const storeRequestUploadFile = async (IRequestUploadFile) => {
        const serializedUpload = new FormData()
        for (const item in requestUploadFile.value ) {
            if (requestUploadFile.value.hasOwnProperty.call(requestUploadFile, item)) {
                serializedUpload.append(item, requestUploadFile.value[item])
            }
        }
 
        await api.post('/requestUploadFile', serializedUpload)
            .catch((error) => {
                console.log("Show error Notification! " + error.response.status);
                checkAutorization(error.response.status);
                if (error.response.status === 422) {
                    for (const key in error.response.data.errors) {
                        errors.value += error.response.data.errors[key][0] + ' ';
                    }
                }
                return Promise.reject(error.response.data);
            }).then((response) => {
                Swal.fire(
                    'Parabéns',
                    'A requisição ' + response.data.data.id + ' - ' + response.data.data.title + ' foi cadastrado com sucesso',
                    'success'
                );
            });
        await roteador.push({ name: 'requestUploadFile.list' });
    }

Manager Carlos Ferreira 15/11/2022

Olá, Jean!
Tudo bem?

Aqui um exemplo de como fazer isso no frontend amigo: https://github.com/especializati/larachat/blob/main/resources/js/pages/Profile.vue#L107