Upload elmentUI use of components and the background documents submitted in receiving vue

1. Refer to this blog, I hope to have the following knowledge base

vue route, cross-domain requests, springboot2.X, html, have read elementUI official website in detail about the upload component.

2. ado, directly explain the details. Reception using webstorm built vue engineering background with the idea to write the control layer

 

Reception: I was directly copy the sample elementUI official website, I put a new Upload.vue file

==============================================================================================================================
<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" according to their actual RequestMapping writing background, the reason why I do not write the whole, because the picture below, the request will auto-complete address is http: // localhost: 8080 / data / upload

: on-change = "changeMe" do not control this, is my own test 
name = "file" name any, in order to receive back-end data 

configuration front-end route, how to request background

 The back-end code is as follows:

So that you can receive the front desk came files. If the message

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

Can refer https://blog.csdn.net/u010429286/article/details/54381705

If you can upload properly you will see the contents of the debug window

很多网上使用设置headers为mutipart/form-data，在此我重申一下，没有必要。elementUI已经封装加工过了。比用再多此一举去设置。

你如果设置了，你会报错boundry什么，我忘记了。所以说不用去设置。