vue中使用elmentUI的Upload組件提交文件和后台接收

1.參考此博客，希望有以下知識儲備

vue的路由，跨域請求，springboot2.X，html，已經閱讀elementUI官網中關於upload組件的詳細介紹。

2.廢話不多說，直接講解細節。

前台使用webstorm搭建的vue工程:訪問地址使用  http://localhost:8080

 

后台用的idea寫的控制層: 訪問地址使用  http://localhost:8081

 

 

前台：我是直接copy   elementUI官網的樣例，我放在了新建的Upload.vue文件中

==============================================================================================================================
<template>
    <div>
      <el-upload
        class="upload-demo"
        ref="upload"
        action="/data/upload"
        :on-change="changeMe"
        name="file"
        multiple
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">選取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上傳到服務器</el-button>
        <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div>
      </el-upload>
    </div>
</template>

<script>
    export default {
        name: "Upload",
      data() {
        return {
          fileList: []
        };
      },
      methods: {
        submitUpload(event) {
          event.preventDefault();
          this.$refs.upload.submit();
        },
        changeMe(file,fileList){
          this.fileList=fileList;
        },
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePreview(file) {
          console.log(file);
        }
      }
    }
</script>

<style scoped>

</style>
======================================================================================================================

action="/data/upload" 根據自己后台實際RequestMapping書寫，之所以我不寫全，是因為下面那個圖片，請求地址會自動補全為http://localhost:8081/data/upload

:on-change="changeMe" 這個不用管，是我自己做的測試
name="file" 名字任意，為了后台數據的接收

配置前端路由，如何請求后台

 后端代碼如下：

這樣就可以接收到前台傳來的文件了。如果報

Spring Boot:The field file exceeds its maximum permitted size of 1048576 bytes.

可以參考https://blog.csdn.net/u010429286/article/details/54381705

正常如果能上傳就會看到調試窗口的這個內容

很多網上使用設置headers為mutipart/form-data，在此我重申一下，沒有必要。elementUI已經封裝加工過了。比用再多此一舉去設置。

你如果設置了，你會報錯boundry什么，我忘記了。所以說不用去設置。