尽管我写了“enctype="multipart/form-data”，但发生错误“当前请求不是多部分请求”

Question

I am implementing the file upload function.

When I upload a file, it shows what I uploaded, puts in the contents, and posts.

By the way, there was a problem below while uploading the files.

While trying to find a solution, many people asked me to add enctype="multipart/form-data but I added that one earlier.

And yet I don't understand that kind of error.

error

2021-07-30 23:08:21.239 ERROR 20744 --- [nio-8080-exec-9] o.a.c.c.C.[.[.[/].[dispatcherServlet]    : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is org.springframework.web.multipart.MultipartException: Current request is not a multipart request] with root cause

front

<template>
  <div class="scale">
    <button><b-icon-arrow-left></b-icon-arrow-left></button><span>게시글 생성하기</span>
    <form enctype="multipart/form-data" method="post" >
      <div class="d-flex flex-row">
        <button style="display:inline-block; margin-right:5%; margin-left:2%" @click.prevent="clickInputTag()" id='addimage'><b-icon-plus class="h1"></b-icon-plus></button>
        <input hidden ref="plus" name="file" id="file" type="file"  accept="image/*" @change.prevent="uploadImage($event)" multiple>
        <div id="image_container"></div>
      </div>
      <div>
        <b-textarea v-model="content"  placeholder="Tall textarea" rows="8"></b-textarea>
        <b-button @click="articleCreate()" >전송</b-button>
      </div>
    </form>
  </div>
</template>

 import axios from 'axios'
  export default {
    name:'ArticleCreate',
    data(){
      return{
        content:"",
        files: new FormData(),
      }
    },
    methods:{
      clickInputTag() {
        this.$refs['plus'].click()
      },
      uploadImage(event) { 
        console.log(event.target.files)
        const photoFile = document.getElementById("file")
        this.files.append("file", photoFile.files[0]);

        for (var image of event.target.files) {
          var reader = new FileReader(); 
          reader.onload = function(event) 
          { 
            var img = document.createElement("img"); 
            img.setAttribute("src", event.target.result); 
            img.setAttribute("width","25%"); 
            document.querySelector("div#image_container").appendChild(img); 
          }; 
          reader.readAsDataURL(image);
        } 
        console.log(this.files, typeof this.files)
      },
      articleCreate(){
        axios({
          url:'http://127.0.0.1:8080/article',
          method:'post',
          headers: {
            'x-access-token': `${localStorage.getItem('token')}`,
          },
          params: {
            content: this.content,
            files: this.files,
          }
        })
          .then(res=>{
            this.$router.push({ name:'article'})
            console.log(res.data)
            console.log(this.files)
          })
          .catch(err=>{
            console.log(`${localStorage.getItem('token')}`)
            console.log(this.files)
            console.log(this.content)
            console.log(err)
          })
      },
    }
  }

back

@PostMapping("/article")
    @ApiOperation(value = "게시글 작성")
    public Object postArticle(@RequestParam String content, @RequestParam(required = true) List<MultipartFile> files) throws IOException {
        Authentication user = SecurityContextHolder.getContext().getAuthentication();
        ResponseEntity response = null;
        if(user.getPrincipal() == "anonymousUser"){
            response = new ResponseEntity<>("Fail", HttpStatus.UNAUTHORIZED);
            return response;
        }else {
            UserDetails user2 = (UserDetails) user.getPrincipal();
            Optional<User> userOpt = userDao.findByEmail(user2.getUsername());

            Long articleId = articleDao.save(Article.builder()
                    .articleid(null)
                    .id(userOpt.get().getUid())
                    .createdtime(null)
                    .updatedtime(null)
                    .review(content)
                    .build()
            ).getArticleid();

            List<String> pathName = saveFiles(files);
            System.out.println(pathName.get(0));
            for(int i = 0; i < files.size(); ++i) {
                imageDao.save(Image.builder()
                        .imageid(null)
                        .articleid(articleId)
                        .imgURL(pathName.get(i))
                        .build()
                );
            }

            response = new ResponseEntity<>("게시글 작성 완료", HttpStatus.OK);
            return response;
        }
    }

Answer 1

Try adding content-type: multipart/form-data in header of your axios call.

headers: {
 'x-access-token': `${localStorage.getItem('token')}`,
 'content-type': 'multipart/form-data'
}