|
안녕하세요. 스프링부트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쪽으로 잘 들어오네요 ^^