¾È³çÇϼ¼¿ä. ½ºÇÁ¸µºÎÆ®2 + Vue.js·Î °³¹ßÁß¿¡ÀÖ½À´Ï´Ù.
À¥¿¡¼ ÆÄÀÏÀ» multiple·Î ¼±ÅÃÈÄ
axios Àü¼Û ÇÁ·ÎÅäÄÝ·Î Back-end·Î µ¥ÀÌÅ͸¦ ³Ñ±â·Á´Âµ¥ Àß µÇÁú¾Ê½À´Ï´Ù.
±âº»ÀûÀ¸·Î input type file ¿¡¼ ÆÄÀÏÀ» ¾÷·ÎµåÇϸé
Vue°´Ã¼ÀÇ
data : {
images : []
}
data.image ¹è¿¿¡ push·Î ³Ö½À´Ï´Ù.
ÀÌ·±½ÄÀ¸·Î µÇ°Ú±¸¿ä.
±× ´ÙÀ½ ¹é´Ü ÄÁÆ®·Ñ·¯¿¡¼´Â
public BaseResult postFiles(HttpServletRequest request, @RequestPart MultipartFile[] images) throws Exception {
ÀÌ·±½ÄÀ¸·Î ¹Þ´Âµ¥
ÆĶó¹ÌÅ͸¦
var bodyFormData = new FormData();
bodyFormData.append('images', this.images);
ÀÌ·±½ÄÀ¸·Î ´ã¾Æ¼ º¸³»¸é ÄÁÆ®·Ñ·¯¸¦ ŸÁö¸¸ ÆÄÀϵéÀÌ ´ã°ÜÀÖÁö¾Ê°í,
±×³É Æûµ¥ÀÌÅÍ¿¡ ´ãÁö¾Ê°í ±×³É º¸³»¸é
org.springframework.web.multipart.MultipartException: Current request is not a multipart request
¿¡·¯°¡ ³ª¿É´Ï´Ù.
ù¹ø¤Š ±Ã±ÝÇÑ°ÍÀº,
ÀϹÝÀûÀ¸·Î html¿¡¼ formÀ¸·Î ±¸¼ºÈÄ ajax ȤÀº form submitÀ¸·Î ÆÄÀÏÀ» ³Ñ±æ¶§ ³Ñ¾î°¡´Â ÆĶó¹ÌÅÍ ±¸¼ºÀÌ
Á¦°¡ ºä¿¡ data.images ¹è¿¿¡ ´ãÀº µ¥ÀÌÅÍÀÇ ¸ð½À°ú °°³ª¿ä ?
¾Æ´Ï¸é ¾÷·ÎµåÇÑ ÆÄÀÏÀ» ¹é´ÜÀ¸·Î º¸³¾¶§´Â Àú·± ÇüÅÂÀÇ µ¥ÀÌÅÍ°¡ ¾Æ´Ñ°¡¿ä ?
µÎ¹ø¤Š·Î´Â,
axios({
method: 'post',
url: this.url + "/files",
params : this.images,
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(function (response) {
}.bind(this))
.catch(function(e) {
});
ÀÌ·±½ÄÀ¸·Î ³Ñ±â°í Çǵ鷯 ȤÀº Å©·Ò °³¹ßÀÚµµ±¸ ³×Æ®¿öÅ©¿¡¼ º¸¸é Content-TypeÀÌ multipart/form-data·Î ³Ñ¾î°¡Áú¾Ê´Â°Å°°Àºµ¥
axios¿¡¼ Content-Type ÁöÁ¤ÇÏ´Â ¹æ¹ýÀÌ Æ²·È³ª¿ä ?
¼¼¹ø°·Î´Â,
ÆÄÀÏ »Ó¸¸¾Æ´Ï¶ó Á¦¸ñ, º»¹®, »ç¿ëÀÚ µî ÅؽºÆ®Å¸ÀÔ ÆĶó¹ÌÅ͵µ ÇÔ²² ¹é´ÜÀ¸·Î ³Ñ°Ü¾ßÇϴµ¥
ÀϹÝÀûÀÎ ÆĶó¹ÌÅÍ¿Í ÆÄÀÏÀ» µ¿½Ã¿¡ ¹é´ÜÀ¸·Î º¸³¾¼öÀÖ³ª¿ä?
Content-TypeÀÌ ¸ÂÁö ¾Ê¾Æ¼ ¾ÈµÉ°Å¶ó »ý°¢À»Çߴµ¥ °¡´ÉÇÑ°¡¿ä?
´äº¯ ¹Ì¸® °¨»çµå¸³´Ï´Ù
|
params : this.images ÀÌ°Ô ¾Æ´Ï¶ó bodyFormData ·Î º¸³»¾ß ÇÏ´Â°Í ¾Æ´Ñ°¡¿ä?
1/2 ´Â ºñ½ÁÇÑ ¹®Á¦ °°À¸´Ï
3¹øÀÇ °æ¿ì µÑ´Ù µ¿½Ã¿¡ ³Ñ¾î°©´Ï´Ù.
¸»¾¸ÇØÁֽŴë·Î Formdata·Î ¸¸µé¾î¼ º¸³»´Â ¹æ¹ýÀÌ ¸Â´Â°Å°°Àºµ¥ Àß ¾ÈµÇ³×¿ä..Èå
3¹ø¿¡ °æ¿ì¿¡´Â ±×·³ Àú FormData¿¡ ¾îÆæµåÇؼ °°ÀÌ º¸³»¸é µÇ³ª¿ä ?
´äº¯ °¨»çµå¸³´Ï´Ù
Vue data¿µ¿ª¿¡¼
uploadParam : new FormData()
ÀÌ·±½ÄÀ¸·Î FormData °´Ã¼¸¦ »ý¼ºÇصΰí
axios·Î Åë½ÅÇÏ¿´½À´Ï´Ù
this.uploadParam.append('title', title);
this.uploadParam.append('contents', contents);
this.uploadParam.append('images', images);
: 2°³ÀÌ»ó ÆÄÀÏ ¾÷·Îµå½Ã ·çÇÁ
ÀÌ·±½ÄÀ¸·Î ±¸ÇöÇؼ ³Ñ°å½À´Ï´Ù.
¹é´ÜÀº
@PostMapping
public~~~~~~ (@RequestParam Map<String, Object> param, @RequestParam MultipartFile[] images)
ÀÌ·±½ÄÀ¸·Î ÄÁÆ®·Ñ·¯¿¡¼ ¹ÞÀ¸´Ï À̹ÌÁö´Â imagesÂÊÀ¸·Î, ±×¿Ü µ¥ÀÌÅ͵éÀº paramÂÊÀ¸·Î Àß µé¾î¿À³×¿ä ^^