使用Vue+ElementUI+Axios+SpringBoot实现文件上传

网上的很多上传文件教程基本上都是采用了在action那里加上后端请求的路径，直接提交到后端，但是我由于后端设置了token，不能这样子，必须自己用axios请求。

1.项目后端使用的是SpringBoot

1.1 导入maven依赖

引入maven依赖

• commons-fileupload
• commons-io

commons-io可以不用自己导入，maven会自动导入对应版本的jar包

<?xml version="1.0" encoding="UTF-8"?>
xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd">

    id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        name="defaultEncoding" value="UTF-8"/>
        
        name="maxUploadSize" value="1048576"/>
        
        name="resolveLazily" value="true"/>
        
        name="uploadTempDir" value="file"/>
        
        name="maxInMemorySize" value="40960"/>
    >
>

1.3 编写测试的Controller

<script>
import axios from "axios";
export default {
  data() {
    return {};
  },
  methods: {
    Submit() {
      var file_form = new FormData(upload);  //获取上传表单（文件）
      axios({
        url: "/api/file/upload",
        method: "POST",
        headers: {
          token: localStorage.getItem("token"),
        },
        data: file_form,
      })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {},
};

需要注意的是，表单必须有action，就算是空的也行，表单中的文件选择框的name就是我们要给传递的参数（即file），并给按键添加点击提交事件。
var file_form = new FormData(upload); //获取上传表单（文件）
这行代码是获取表单中upload中的文件（upload是表单的id，需要自己设置）。
然后就是使用axios去请求后端的api，需要注意的是这里不需要携带Content-Type参数，axios会给我们自动加上对应的headers，如果我们自己加上也许又会出现了很多的Bug。（如果自己写遇到bug建议copy上面的代码，我也踩了好多坑才过来）

4. 既然普通的html表单能够实现，但是我更想使用ElementUI这个框架，真的太好看了！！

说干就干，但是怎么一看ElementUI的组件，我完全看不出和普通的表单有什么相似之处。。。。折腾折腾折腾，最终得到如下说明：

<script>
import axios from "axios";
export default {
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    UploadSubmit(param) {
      var file = param.file;
      //console.log(param.file);
      var file_form = new FormData(); //获取上传表单（文件）
      file_form.append("file", file);
      axios({
        url: "/api/file/upload",
        method: "POST",
        headers: {
          token: localStorage.getItem("token"),
        },
        data: file_form,
      })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
  },
  created() {},
};
</script>

作简单说明：

• 这里的el-upload上的action标签也必须有，不然也会报错。
• 我们不使用action方式提交表单，而是使用自定义的HttpRequest方法去提交。在el-upload标签上添加属性:http-request="UploadSubmit"，并在method中定义UploadSubmit方法，注意，需要添加参数param，应该是ElementUI为我们提供的，这个参数会拿到我们的http请求，我们通过param.file就可以拿到我们表单中的文件了！param参数是必须写的！
• 在UploadSubmit方法中我们自己定义需要的请求（和上面的普通表单的submit类似，小改动）

• 选用ElementUI上面其他的组件也类似，基本上可以仿照这个例子！

请求成功，基本功能实现了，具体的细节可以自己折腾了~