Hello!
I’m new on Vue.Js and Axios… and got a mission on my job to make things working (help me aa).
I have these lines of code that I need to make work and I don’t understand where my mistake is.
I can upload files via Insomnia… But via Vue and Axios code, I can’t. Can you help me with that? I need it for my job. Running everything on my localhost.
My form code:
<div class="mb-4">
<label for="titleInput" class="form-label">Título do vídeo</label>
<input v-model="title" type="text" class="form-control" id="titleInput"/>
</div>
<div class="mb-4">
<label for="thumbnailInput" class="form-label">Thumbnail do Vídeo</label>
<input @change="onFileSelected" type="file" class="form-control" id="thumbnailInput" aria-describedby="thumbnailHelp" required />
<div id="thumbnailHelp" class="form-text">
Por favor, selecione a imagem de destaque do vídeo.
</div>
</div>
<div class="mb-4">
<label for="thumbnailInput" class="form-label">Vídeo</label>
<input @change="upload(video)" type="file" class="form-control" id="thumbnailInput" aria-describedby="videoHelp" required/>
<div id="videoHelp" class="form-text">
Por favor, selecione o arquivo de vídeo que deseja utilizar.
</div>
</div>
<button @click="onUpload" type="submit" class="btn btn-primary">
Enviar
</button>
My Vue.Js Code:
import axios from "axios";
const BASE_URL = "http://localhost:1337";
export default {
name: "home",
data() {
return {
title: "",
selectedFile: null,
loading: true,
errored: false,
};
},
// mounted() {
// },
methods: {
onFileSelected(event) {
console.log(event);
this.selectedFile = event.target.files[0];
},
onUpload() {
const fd = new FormData();
fd.append("image", this.selectedFile, this.selectedFile.name);
axios
.post(`${BASE_URL}/videos`, fd, {
headers: {
"Content-Type": "multipart/form-data",
},
})
.then((res) => {
console.log(res);
})
.catch((error) => {
console.log(error);
});
},
},
};
And I got this error:
What I should do to get this working on Vue?