I'm trying to upload an image to my database, but I'm not quite sure if I'm doing this correctly.
Below is the code in my child component:
<script setup lang="ts">
import { ref } from 'vue';
const movieTitle = ref("");
const moviePoster = ref();
function fileInput(e: Event) {
const inputElement = e.target as HTMLInputElement;
const file = inputElement.files?.[0].name;
if (file) {
moviePoster.value = file;
console.log("moviePoster", moviePoster.value);
}
}
const emits = defineEmits<{ (e: "movieInfo", poster: FormData, title: string): void }>();
function emitImage() {
if (!moviePoster.value) {
return;
}
// Emit the "movieInfo" event with the poster and title
emits("movieInfo", moviePoster.value, movieTitle.value);
}
</script>
<template>
<div class="large-container">
<div class="small-container">
<form @submit.prevent="emitImage" enctype="multipart/form-data">
<label for="file">Upload Movie Poster</label>
<input type="file" @change="fileInput"/>
<label for="movie-title-input">Movie Title</label>
<input type="text" v-model="movieTitle" name="movie-title-input" />
<button>Upload Image</button>
</form>
</div>
</div>
</template>
In the parent component, the following code is present:
<script setup lang="ts">
import AdminPageVue from '@/components/adminpage/AdminPage.vue';
import axios from 'axios';
import { ref } from 'vue';
const savedMovie = ref<any>(null);
async function saveMovieInfo(poster: FormData, movieTitle: string) {
console.log("poster", poster, "title", movieTitle);
const movieInfo = {
poster: JSON.stringify(poster),
title: movieTitle
};
console.log("movieInfo", movieInfo);
try {
const response = await axios.post("http://localhost:3000/movie/savemovie", movieInfo);
console.log("Movie saved successfully!", response.data);
const { poster, title } = response.data;
console.log("poster", poster)
savedMovie.value = {
poster: poster,
title: title,
};
console.log("savedMovie.value", savedMovie.value)
} catch (error) {
console.log("Failed to save movie:", error);
}
}
</script>
<template>
<div>
<AdminPageVue @movieInfo="saveMovieInfo"></AdminPageVue>
<img :src="savedMovie.poster" alt="Uploaded Image" v-if="savedMovie" />
</div>
</template>
In my express server, the mongoose schema looks like this:
const { default: mongoose } = require("mongoose");
const storedMovieInfo = mongoose.Schema({
poster: String,
title: String,
});
module.exports = mongoose.model("storedmovieinfo", storedMovieInfo);
For the movie.js router:
var express = require('express');
var router = express.Router();
const multer = require("multer");
const MovieModel = require ("../models/movie_model");
const upload = multer({storage});
router.post('/savemovie', upload.single("file"), async (req, res) => {
const { title, poster } = req.body;
const parsedPoster = JSON.parse(poster);
console.log('poster', parsedPoster, 'title', title);
try {
const newMovie = await MovieModel.create({
poster: parsedPoster,
title: title,
});
console.log("newMovie", newMovie);
res.status(201).json({
poster: newMovie.poster,
title: newMovie.title,
});
} catch (error) {
console.log("Error saving movie:", error);
res.status(500).json({ error: "Failed to save movie" });
}
});
module.exports = router;
When trying to retrieve the image from the database, there seems to be an issue where the browser cannot find the image, indicating a possible error in the process.
I attempted to save the image in the database for retrieval, but encountered difficulties.