使用timymce编辑器上传图像返回405错误

Question

我的环境是后端，spring引导前端是ve3。当我尝试使用tinyMce编辑器上传图像时，我可以在控制台窗口中看到405错误。这是编辑器的问题吗?还是有什么我不知道的?

我想使用automatic_uploads以文件而不是blob的形式将图片文件保存到服务器。已确认以blob格式存储

ve3在端口8081上运行，spring boot在端口8080上运行。Vue和spring使用代理通信。

vue3文件。

<template>
<div class="m-2">
<table class=" border w-full border">
<tr class="border">
<th class="w-28 border">제목</th>
<td class="border" colspan="2"><input type="text" class="w-full" v-model="title"></td>
</tr>
<tr class="border">
<th class="border">홈화면</th>
<td class="border">
<editor
api-key="no-api-key"
:plugins="myPlugins" :toolbar="myToolbar" :init="myInit"
v-model="summary"
/>
</td>
<td class="border w-20">
<input type="file" class="w-20 file" name="file" value="" accept="image/jpeg" @change="insertFile">
</td>
</tr>
<tr class="border">
<th class="border">본문</th>
<td class="border" colspan="2">
<editor
api-key="no-api-key"
:plugins="myPlugins" :toolbar="myToolbar" :init="myInit"
v-model="content"
/></td>
</tr>
</table>
</div>
<div class="text-right gap-2">
<button class="h-8 border w-16 mr-2 rounded-md bg-gray-300" @click="$router.push(`/contract/notice/contractNotice/${currentPage}`)">목록으로</button>
<button class="h-8 border w-16 rounded-md bg-blue-300" @click="submitNotice">작성하기</button>
</div>
</template>
<script>
import Editor from '@tinymce/tinymce-vue'
import axios from 'axios'
import router from '@/router'
import { useRoute } from 'vue-router'
export default {
name: 'CreateNoticeView',
components: { editor: Editor },
data () {
return {
isClick: false,
compCode: [],
myPlugins: 'image',
myToolbar: 'fontfamily fontsize | bold italic underline | forecolor backcolor | alignleft aligncenter alignright alignjustify | image | undo redo',
myInit: {
height: 410,
menubar: false,
resize: false,
skin: 'outside',
automatic_uploads: true,
images_upload_url: '/api/notice/uploadFile',
images_reuse_filename: true,
// images_upload_url: "postAcceptor.php",
images_upload_base_path: '',
images_upload_credentials: true
// images_upload_handler: this.exampleImageUploadHandler
},
title: '',
summary: '',
content: '',
seq: '',
numseq: '',
currentPage: useRoute().params.currentPage,
noticeRes: [],
files_name: []
}
},
methods: {
insertFile (e) {
const formData = new FormData()
for (const file of e.target.files) {
formData.append('file', file)
}
axios.post('/api/notice/uploadFile', formData, { headers: { 'Content-Type': 'multipart/form-data' } })
.then((res) => {
this.files_name = res.data
})
},
axios.post('/api/notice/submitNotice', {
params: {
title: this.title,
summary: this.summary,
content: this.content,
seq: this.seq,
numseq: this.numseq,
compcode: this.compCode,
imgname: this.files_name
}
}).then((res) => {
if (res.status === 200) {
this.noticeRes = res.data
alert('글이 등록되었습니다.')
router.push(`/contract/notice/contractNotice/${this.currentPage}`)
}
}).catch((err) => {
console.log(err)
})
}
}
</script>
<style scoped>
</style>

java方法

@PostMapping("/api/notice/uploadFile")
public JSONObject uploadFile(MultipartFile file) {
String root_path = System.getProperty("user.dir") + "/frontend/src/assets/images/notice/";
String fileName = null;
String realName = null;
String milName = null;
String saveName =null;
// 파일이 있으면 업로드
if (file != null && !file.isEmpty()) {
fileName = file.getOriginalFilename();
String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1,
fileName.length());
String fil11 = fileName.substring(0,fileName.indexOf("."));
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
long milliSecond = System.currentTimeMillis();
milName = String.valueOf(milliSecond).substring(10, 13);
realName = fil11 + "."+ fileExt;
saveName = (sdf.format(new java.util.Date()) + milName  ) + "."+fileExt;
File ckfile = new File(root_path + saveName);
int i = 0;
while (ckfile.exists()) {
i++;
saveName = ( (sdf.format(new java.util.Date()) + milName) ) + i  + "."+fileExt;
ckfile = new File(root_path + saveName);
}
// upload 가능한 파일 타입 지정
try {
byte[] bytes = file.getBytes();
File outFile = new File(root_path + saveName);
FileOutputStream fileOutputStream = new FileOutputStream(
outFile);
fileOutputStream.write(bytes);
fileOutputStream.close();
} catch (IOException e) {
//
}
} else {
saveName = "not";
}
String path = "img/notice/";
String returnFilepath = path + saveName;
Map<String, String> resMap = new HashMap<>();
resMap.put("location", returnFilepath);
JSONObject resJson = new JSONObject(resMap);
this.resJson = resJson;
return resJson;
}

I hope this isn't a bug in tinyMce.

Answer 1

对于本地开发，Vue如何知道Java在端口8081上运行?

如果你没有指定端口号，它将使用页面自己的端口号8080 (Vue，我认为这很可能会给出405)。

您可以尝试将上传URl更改为http://localhost:8081/api/notice/uploadFile并重试吗?