<template>
<div>
<h3>src/components/BoardWrite.vue</h3>
{{ state }}
<hr />
제목: <input type="text" v-model="state.title" /> <br />
내용:
<div style="width: 600px;">
<ckeditor :editor="editor.editor" v-model="state.content"></ckeditor>
</div>
작성자: <input type="text" v-model="state.writer" /> <br />
이미지:
<img :src="state.imgurl" style="width: 50px; height: 50px" />
<input type="file" @change="handleImage" /> <br />
<button @click="handleWrite">글쓰기</button><br />
</div>
</template>
<script>
import { reactive } from '@vue/reactivity'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import axios from 'axios';
import { useRouter } from 'vue-router';
export default {
setup () {
const router = useRouter();
const editor = {
editor : ClassicEditor,
editorData : '<p>테스트</p>',
editorConfig: {}
}
const state = reactive({
title : '',
content: '',
writer : '',
imgdata: '',
imgurl : require('../assets/default image.png'),
});
const handleImage = (e) => {
console.log(e);
if(e.target.files[0]) {
state.imgdata = e.target.files[0];
state.imgurl = URL.createObjectURL(e.target.files[0]);
}
else {
state.imgdata = '';
state.imgurl = require('../assets/default image.png');
}
}
const handleWrite = async () => {
if(state.title === '') {
alert('제목을 입력하세요')
return false;
}
else if(state.content === '') {
alert('내용을 입력하세요');
return false;
}
else if(state.writer === '') {
alert('작성자를 입력하세요');
return false;
}
else if(state.imgdata === '') {
alert('이미지를 등록하세요');
return false;
}
const url = `/board/insert`;
const headers = { "Content-Type": "multipart/form-data" };
const body = new FormData();
body.append("title" , state.title);
body.append("content", state.content);
body.append("writer" , state.writer);
body.append("image" , state.imgdata);
const response = await axios.post(url, body, { headers });
console.log(response.data);
if(response.data.status === 200) {
alert('글쓰기 완료');
router.push({ name: "Board" });
}
}
return { editor, state, handleImage, handleWrite }
}
}
</script>
<style lang="scss" scoped>
</style>