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什么，我忘記了。所以說不用去設置。

?

轉載于:https://www.cnblogs.com/fanjunhui/p/11307837.html

總結

以上是生活随笔為你收集整理的vue中使用elmentUI的Upload组件提交文件和后台接收的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。