[Vuejs]-The image url is not passing as a parameter in axios to api

by

0👍

✅

found the answer it seems strange but it works:

instead of this

   const handleFileUpload = (event) => {
      const files = event.target.files;

      for (let i = 0; i < files.length; i++) {
        const file = files[i];
        console.log(file.name);
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          images.value.push(reader.result);

        };
      }

      uploadImage(images.value);
    };

i move the function inside the reader.onload

const handleFileUpload = (event) => {
          const files = event.target.files;
    
          for (let i = 0; i < files.length; i++) {
            const file = files[i];
            console.log(file.name);
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = () => {
              images.value.push(reader.result);
      uploadImage(images.value);
            };
          }
    
        
        };

0👍

Try to set headers to multipart/form-data

api.post('image-upload.php',
        { image: payload },
        headers: { "Content-Type": "multipart/form-data" },
        )
      .then(response => resolve(response.data))
      .catch(error => reject(error));
  });

Also you can try to send the image as a blob.

Leave a comment