How can I send data from form vue 3 to server laravel

Question

I am trying to send data with file to server

I have code on vue 3

const formData = new FormData();
  formData.append('responsible_name', groupForm.value.responsibleName);
  formData.append('responsible_phone', groupForm.value.responsiblePhone);
  formData.append('responsible_email', groupForm.value.responsibleEmail);
  formData.append('appeal_type_id', groupForm.value.appealTypeId);
  formData.append('municipality_id', groupForm.value.municipalityId);
  formData.append('educational_institution_id', groupForm.value.educationalInstitutionId);
  formData.append('users', groupForm.value.users);
  formData.append('flows', groupForm.value.flows.filter((flow: EventFlow) => flow.select).map((flow: EventFlow) => flow.id));
  formData.append('appeal_doc', fileInput.value.files[0]);

I have next code for sending data

const headers = {
  'Content-Type': 'multipart/form-data',
  Accept: 'application/json',
  'Access-Control-Allow-Origin': '*',
  'Cache-Control': 'no-cache',
};
const makeAppeal = async <T>(body: BodyFetchData): Promise<T> => {
    try {
      const data = await fetchData('/appeal/create', 'POST', body, headers);
      return data as T;
    } catch (e) {
      return Promise.reject(e);
    }
  };

Basically, fetchData is $fetch from vue3.

Then I have next response from server. 422 error and next messages

{"message":"The flows field is required. (and 4 more errors)","errors":{"flows":["The flows field is required."],"responsible_name":["The responsible name field is required."],"responsible_phone":["The responsible phone field is required."],"responsible_email":["The responsible email field is required."],"users":["The users field is required."]}}

I have next headers for request

const fetchData = async <T>(url:string, method: MethodFetchData = 'GET', body: BodyFetchData = '', headers: Record<string, string> = {}): Promise<T> => {
  const apiUrl = `${useRuntimeConfig().public.domainApi}${url}`;
  const headersDefault = {
    'Content-Type': 'application/json',
    Accept: 'application/json',
    'Access-Control-Allow-Origin': '*',
    ...headers,
  };
  try {
    if (method === 'GET') {
      const data = await $fetch(apiUrl, { headers: headersDefault, method, params: body || {} });
      return data as T;
    }
    if (method === 'POST') {
      const data = await $fetch(apiUrl, { headers: headersDefault, method, body });
      return data as T;
    }
    return Promise.reject();
  } catch (error) {
    return Promise.reject(error);
  }
};

I am tried use xhr and many many variants for using this. When I use postman it's ok, but with js I have this problems

1st issue, don't put CORS response headers in a request, it breaks more than it solves (it solves nothing by the way), though, it doesn't look like a cross origin request anyway, so just ditch it - but, we can't see what the request body is, did yo check it has the required fields? nor do we know what fetchData function does. — Jaromanda X
– Jaromanda X, Commented Sep 24, 2024 at 0:37
Hello! Thanks for replying. I edit message and added fetch data code. Please check, maybe you have some thoughts — bobrov_site
– bobrov_site, Commented Sep 24, 2024 at 6:13
-----------------------------277583172838917142683433978093 Content-Disposition: form-data; name="responsible_name" ÐÐ¾Ð±ÑÐ¾Ð² ÐÐ°Ð½Ð¸Ð¸Ð» -----------------------------277583172838917142683433978093 Content-Disposition: form-data; name="responsible_phone" +7(962)425-66-01 -----------------------------277583172838917142683433978093 Content-Disposition: form-data; name="responsible_email" — bobrov_site
– bobrov_site, Commented Sep 24, 2024 at 6:16
In this comment I have data some like that from mozilla Firefox inspector. For me it's look very strange, but personally I don't work with multipart/form-data before. — bobrov_site
– bobrov_site, Commented Sep 24, 2024 at 6:17

bobrov_site · Accepted Answer · 2024-09-24 07:47:19Z

1

I found solution for my problem. I saw that I don't have header with boundary x, that generates dynamically for multipart/formdata.

Solution for problem was here appending array to FormData and send via AJAX

I just remove all my headers except:

Accept: 'application/json',

answered Sep 24, 2024 at 7:47

bobrov_site

971 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I send data from form vue 3 to server laravel

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related