How do I convert my uploaded file to json

Question

I am writing an application with vuejs as frontend and laravel 8 as backend

I want to allow user select a picture from their local computer and send it to the backend.

I want to convert it to json first befor sending it to the server

but when I convert it to json the json object becomes empty

template

<input type="file" @change="uploadFile( $event, index, idx )" name="" id="">

Vuejs

export default {
  name: 'CreateCourse',
  setup(){
    const file = reactive({"file" :''})
    const uploadFile = (e, idx, i) => {
            file.file = e.target.files[0];
            console.log("no json", file.file);
            console.log("Object file is ",JSON.parse(JSON.stringify(file.file)));
        }

    const formData = new FormData();
    formData.append("file", file);


    axios.post('http://127.0.0.1:8000/api/v1/courses', formData, {
        headers: {
        'accept': 'application/json',
        'Accept-Language': 'en-US,en;q=0.8',
        'Content-Type': 'multipart/form-data'
        }
    }).then(response => {
       
    }).catch(err => {
        NotificationService.error(err.response);
        showLoader(false);
    });
return {
        uploadFile
    }
   }
}

The console.log with no json show the uploaded file but the console.log with object file shows empty json object. How do I go about this?

score 0 · Answer 1 · answered Nov 01 '21 at 07:42

0

The file is in buffer format and needs to be converted to string so JSON.parse wont work. Read more here

answered Nov 01 '21 at 07:42

myestery

105
1
11

I also removed JSON.parse and used JSON.stringify but it did not work for me – etranz Nov 01 '21 at 07:57
convert the buffer to string before attempting JSON.parse – myestery Nov 01 '21 at 08:13

How do I convert my uploaded file to json

1 Answers1