保存图像对象 VueJS

Question

I have an Image Object in VueJS as File {name: "myFile.png", webkitRelativePath: "", size: 120124, …} . I want to save this image into one of my folders. How can I do this in VueJS?

One more question: Should I save user images to either front-end or back-end? I can send a request to back-end API but if images are on front-end side it may work fast (correct me if I'm wrong).

Note: My front-end (VueJS) and back-end (Laravel as API) are separate projects.

Answer 1

You have to create an api endpoint on the backend for file saving. On a frontend you have to send POST request with attached file.

(picture) => {
  const data = new FormData();
  data.append('picture', picture);
  return fetch(
    `${this.$dishApi}/recipes/${recipeId}/pictures/`,
    {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'x-access-token': localStorage.getItem(this.$dishApiTokenKey),
      },
      body: data,
    },
  )
    .then(
      (res) => res.json(),
    );
},

This function taken from vue component. Here FormData object created to store files from the user form. You can append several files in this way.

After appending files post request sent with FormData object inside.