elementUI自定义上传文件功能实现(前端后端超详细过程)

<el-upload class="upload"
                 ref="upload"
                 action="string"
                 :file-list="fileList"	//存放选择的文件
                 :auto-upload="false"	//取消自动上传		
                 :http-request="uploadFile"		自定义上传的方法
                 :on-change="handleChange"	//文件选择后执行的方法
                 :on-preview="handlePreview"	//点击显示文件（没啥用）
                 :on-remove="handleRemove"	//移除文件
                 multiple="multiple">	
        <el-button slot="trigger"
                   size="small"
                   type="primary"
                   @click="delFile">选取文件</el-button>
      </el-upload>

data(){
    return{
	// el-upload组件绑定的属性—— :file-list=“fileList”,渲染后fileList[index]是Object类型,而不是后台所需的File类型,
      // 而这个组件已经把对应的File类型存储到了fileList[index].raw这个属性里,直接拿来用就好.
      fileList: [],
      // 不支持多选
      multiple: false,
      formData: "",
    }
}

    //点击上传文件触发的额外事件,清空fileList
    delFile () {
      this.fileList = [];
    },
    handleChange (file, fileList) {
      this.fileList = fileList;
      // console.log(this.fileList, "sb");
    },
    //自定义上传文件
    uploadFile (file) {
      this.formData.append("file", file.file);
      // console.log(file.file, "sb2");
    },
    //删除文件
    handleRemove (file, fileList) {
      console.log(file, fileList);
    },
    // 点击文件
    handlePreview (file) {
      console.log(file);
    },

//准备一个提交按钮
<el-button type="primary"
                     @click="onSubmit">保存</el-button>

//保存按钮
    onSubmit () {
        let formData = new FormData();
        formData.append("file", this.fileList[0].raw);//拿到存在fileList的文件存放到formData中
       //下面数据是我自己设置的数据,可自行添加数据到formData(使用键值对方式存储)
        formData.append("title", this.title);

axios.post(post请求的具体路径, formData, {
        "Content-Type": "multipart/form-data;charset=utf-8"
      })
        .then(res => {
          if (res.data === "SUCCESS") {
            this.$notify({
              title: '成功',
              message: '提交成功',
              type: 'success',
              duration: 1000
            });
          }
        })

//采用PostMapping
    @PostMapping(具体路径)
    public String saveVue(String title,@RequestParam("file") MultipartFile file) throws IOException {
       	//拿到具体文件 file
            return "SUCCESS";
    }